Page MenuHomePhabricator

[web] Dropdown component improvements
AcceptedPublic

Authored by ginsu on Mon, Jun 24, 9:29 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Jun 25, 6:27 AM
Unknown Object (File)
Tue, Jun 25, 6:07 AM
Unknown Object (File)
Mon, Jun 24, 11:09 PM
Unknown Object (File)
Mon, Jun 24, 11:07 PM
F2101343: Screenshot 2024-06-25 at 1.12.59 AM.png
Mon, Jun 24, 10:18 PM
F2101342: Screen Recording 2024-06-25 at 1.11.14 AM.mov
Mon, Jun 24, 10:18 PM
F2101347: Screenshot 2024-06-25 at 1.14.04 AM.png
Mon, Jun 24, 10:18 PM
Subscribers

Details

Reviewers
inka
kamil
ashoat
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)

Depends on D12534

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)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu requested review of this revision.Mon, Jun 24, 9:45 PM
This revision is now accepted and ready to land.Thu, Jun 27, 6:29 AM

Just some nits

web/components/dropdown.react.js
33–35

Shorthand

97–101

I'd prefer this, but don't feel too strongly

  1. 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

Thanks for fixing this!