Conversation
|
@copilot review this PR |
|
@nishthaAhujaa I've opened a new pull request, #2329, to work on those changes. Once the pull request is ready, I'll request review from you. |
…, and add tests (#2329) * Initial plan * Refactor SearchableDropdown with Fluent UI components and add tests - Replace native HTML elements with Fluent UI components (Stack, DefaultButton, Text) - Extract inline styles to SearchableDropdown.styles.ts - Add comprehensive unit tests (14 test cases) - Verify behavior consistency with AccountSwitcher tests Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> * Optimize SearchableDropdown with useMemo for filteredItems Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> * Fix text alignment to match original UI - ensure left alignment - Add flexContainer.justifyContent: "flex-start" to button styles - Add textAlign: "left" to button label, item styles, and empty message - Restore original left-aligned appearance for placeholder and selected text Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>
|
@copilot fix the compile error |
|
@nishthaAhujaa I've opened a new pull request, #2355, to work on those changes. Once the pull request is ready, I'll request review from you. |
* Initial plan * Fix TypeScript compilation errors in SearchableDropdown.test.tsx Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com>
|
Thanks for adding the videos in the description. Can you please provide a good high level explanation of the change ? Are we solving a particular problem with this ? |
|
@jawelton74 We have added search in the subscription and account name dropdown, in the recent change we have added the search icon and the text changes. |
I mean in the PR description, thanks. |
| padding: "0 28px 0 8px", | ||
| border: "1px solid #8a8886", | ||
| background: "#fff", | ||
| color: "#323130", |
There was a problem hiding this comment.
Color codes should be dark-theme compatible. Since these are generic components, we need to ensure they support dark theme usage.
| const [filterText, setFilterText] = useState(""); | ||
| const buttonRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| const closeDropdown = useCallback(() => { |
There was a problem hiding this comment.
Minor: Simple events do not need to be wrapped with useCallback. The same applies to other simpler event handlers in this file, as doing so increases React runtime memoization overhead without providing any significant performance benefits.
Preview this branch
Recording.2026-01-29.134134.mp4
Recording.2026-02-03.160957.mp4
We have added search in the subscription and account name dropdown; in the recent change we have added the search icon and the text changes.