HomePhabricator
Diffusion Comm f2154b3a376d

[web] Dropdown component improvements

Description

[web] Dropdown component improvements

Summary:
In preperation for using the Dropdown component with the tag farcaster channel modals, I needed to extend the Dropdown component. Here is everything new with the Dropdown component

  1. Introduced defaultLabel prop. This prop is the text/label displayed to the user in the dropdown if no option is currently selected
  2. activeSelection prop is now optional. There will be some cases where initially a dropdown won't have a selection, so we should make this prop optional
  3. Introduced selectedIndex state. Rather than iterating through the list of options every time the activeSelection changes, we can keep track of the index of the activeSelection in the list of options and use that to immediately get the active displayed option
  4. dropdownList is now positioned with absolute rather than relative. The dropdown list was causing the modal to change size whenever the dropdown was opened or closed. With the dropdownList using absolute position, the dropdown list won't affect the size of the modal. One thing to point out is now there could be overflow with the dropdown list; however this seems to be an acceptable pattern in other places that use a dropdown component

Screenshot 2024-06-25 at 1.14.04 AM.png (936×1 px, 538 KB)

Test Plan:
Confirmed there were no regressions with the dropdown in the change role modal (only place we use the dropdown component today)

Also confirmed that the dropdown list overflow works as expected

Before:

After:

Screenshot 2024-06-25 at 1.12.59 AM.png (2×3 px, 796 KB)

Reviewers: inka, kamil, ashoat

Reviewed By: inka, ashoat

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D12561

Details

Provenance
ginsuAuthored on Fri, Jun 28, 11:59 AM
Reviewer
inka
Differential Revision
D12561: [web] Dropdown component improvements
Parents
rCOMM44723816bd0f: [lib/native] lift tagFarcasterChannelErrorMessages into lib
Branches
Unknown
Tags
Unknown