Add SearchDropdown component with searchable selection functionality #257
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Renamed search-dropdown.modules.css to search-dropdown.module.css - Updated import path in search-dropdown.tsx accordingly
…ue change handling - Adjusted the clear button's CSS positioning to align it to the right. - Modified the onValueChange prop to accept null, allowing for clearer state management. - Updated the clear button rendering logic to display based on search value and selected value. - Improved option rendering to handle disabled states correctly.
- Modified handleValueChange functions across various stories to accept a string or null. - Updated state initialization for value to allow null, enhancing flexibility in value management.
- Reintroduced the spread operator for the rest props in the input element to ensure proper prop forwarding. - Removed the spread operator from the outer div to maintain intended functionality.
- Commented out unused styles for the search dropdown to streamline the CSS. - Adjusted the positioning and dimensions of the search icon and clear button for better alignment. - Enhanced the hover and focus states for the clear button to improve user interaction.
…older visibility - Removed unused input styles to simplify the CSS. - Added a new style for the disabled state of the input. - Introduced a placeholder style for better user experience.
- Introduced a new state to track if the user is actively searching. - Updated input display logic to show either the current search value or the selected option's text. - Improved the clear button functionality to reset the search state and input value. - Enhanced focus and input handling to better manage user interactions and search state.
- Enhanced the Escape key handling to clear both search and selection when `clearOnEscapeKeyDown` is true. - Updated the input element to reset its value and regain focus after clearing. - Added a new story to demonstrate the clear functionality on Escape key press.
- Introduced an icon component to the search dropdown for enhanced visual representation. - Updated the CSS to position the icon correctly within the dropdown. - Modified the story to demonstrate the new icon feature using the IconFrame32 component.
- Removed unnecessary comments for clarity in the option rendering logic. - Simplified the handling of disabled options to enhance readability. - Updated the story to include a fixed position style for better layout control.
- Eliminated the fixed position style from the search dropdown story for improved layout flexibility. - Cleaned up the code by removing unnecessary style definitions.
- Introduced a new story to demonstrate the search dropdown with custom styles, allowing for better layout control. - Removed unused CSS styles from the search dropdown module to streamline the code and improve maintainability.
…istency - Removed border-radius from the search dropdown styles to align with design updates. - Added padding to the menu container for better spacing and visual appeal. - Ensured the search container maintains consistent height and padding for a cohesive look.
…bility - Added logic to dynamically position the dropdown menu above or below the input based on available viewport space. - Introduced a new state to track if the menu is positioned above the input. - Updated the menu position after rendering to ensure accurate height measurement. - Improved styling for the dropdown menu to handle overflow and maintain layout consistency.
- Enhanced the logic for showing the dropdown menu on focus, ensuring it remains visible during user interactions. - Updated the menu positioning to utilize requestAnimationFrame for smoother transitions and added a delay for accurate height measurement. - Implemented a useEffect hook to adjust the menu position when filtered options change, improving overall user experience.
- Introduced an `inputProps` property to the SearchDropdown component, allowing users to pass additional props to the input element. - Updated the component implementation to spread `inputProps` onto the input element for greater flexibility in customization. - Modified the story to demonstrate the use of `inputProps` with initial focus handling.
…ed usability - Changed the display property of the search dropdown to flex and set its direction to column for better layout. - Removed z-index and added outline styles to enhance focus visibility and accessibility. - Adjusted the tabIndex of the dropdown from 0 to -1 to prevent it from being focusable, improving keyboard navigation.
…sibility - Updated the filtering logic to consider separators and headers, ensuring that relevant options are displayed based on the search value. - Implemented checks for matching options after separators and headers, improving the accuracy of the displayed results. - Enhanced the overall search functionality to provide a better user experience when navigating through dropdown options.
- Changed the behavior of the dropdown menu to hide after an option is selected, improving user experience. - Updated the relevant function call from `triggerRootFocus` to `triggerMenuHide` to reflect this change.
…rove layout - Renamed and reorganized stories for better clarity, including a new 'Disabled' story showcasing disabled options. - Added 'clearOnEscapeKeyDown' functionality to the dropdown, allowing users to clear selection with the Escape key. - Introduced a 'CornerPositions' story to demonstrate dropdown positioning in various corners of the viewport. - Enhanced layout styles for dropdowns to improve visual consistency and usability.
- Renamed the story title from 'Components/SearchDropdown' to 'Components/Search Dropdown' for improved clarity and consistency in naming conventions.
|
Hey @yuanqing, 👋 Can you review my pull request and accept it? I have added a new component called Search Dropdown. I believe it's really helpful for others. I have followed your guidelines. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new
SearchDropdowncomponent and its related functionalities. The changes include the addition of new types, utility functions, styles, and storybook examples to demonstrate the usage of theSearchDropdown.Key changes include:
New Component and Utilities
packages/ui/src/components/search-dropdown/private/types.ts: Introduced a new typeIdthat can be eitherINVALID_IDor a string.packages/ui/src/components/search-dropdown/private/update-menu-element-layout.ts: Added utility functions to update the layout of the dropdown menu, including handling positioning and scroll behavior.Styles
packages/ui/src/components/search-dropdown/search-dropdown.module.css: Added CSS styles for theSearchDropdowncomponent, including styles for input containers, icons, buttons, and the dropdown menu.Storybook Examples
packages/ui/src/components/search-dropdown/stories/search-dropdown.stories.tsx: Added storybook examples for theSearchDropdowncomponent to demonstrate various states and configurations such as empty, focused, selected, with sections, disabled, with icons, clear on escape, and different corner positions.Export Updates
packages/ui/src/index.ts: Exported theSearchDropdowncomponent and its related types and props to make them available for use in other parts of the application.