[web] Display unfriend action menu
ClosedPublic
Actions

Authored by tomek on May 11 2022, 8:27 AM.

Details

Reviewers

• benschac
atul
• jacek

Commits

rCOMM3d434f1d8e92: [web] Display unfriend action menu

Summary

When an edit button is clicked we display a menu where a user can unfriend another user

https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=1311%3A94083

This diff is affected by https://linear.app/comm/issue/ENG-1125/opening-new-menu-without-closing-the-previous-one-doesnt-work which also affects the master.

Depends on D4006

Test Plan

Click an edit button and check if menu is displayed.
Click outside of it and check if it closes.
Open it and click another edit button - verify that only one menu is opened at a time.
Open menu and check if unfriend action works.

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

tomek created this revision.May 11 2022, 8:27 AM

Herald added subscribers: • abosh, • adrian, ashoat. · View Herald TranscriptMay 11 2022, 8:27 AM

tomek edited the summary of this revision. (Show Details)May 11 2022, 8:30 AM

tomek added a child revision: D4008: [web] Memoize friend list row buttons.May 11 2022, 8:36 AM

tomek edited the summary of this revision. (Show Details)May 11 2022, 8:49 AM

Harbormaster completed remote builds in B9019: Diff 12557.May 11 2022, 9:21 AM

tomek requested review of this revision.May 11 2022, 9:21 AM

Could you link the figma designs? I looked in the linear issue but it wasn't there either?
Assuming the positioning of the button will be updated in future diffs? The Button, icon and menu item seem like they should all be centered.

This revision is now accepted and ready to land.May 11 2022, 10:41 AM

tomek edited the summary of this revision. (Show Details)May 12 2022, 7:50 AM

Could you link the figma designs? I looked in the linear issue but it wasn't there either?

Added a link in the summary

Assuming the positioning of the button will be updated in future diffs? The Button, icon and menu item seem like they should all be centered.

This is a good question. In this diff I used an existing component so the position is consistent with other places of the app. In the design of already existing component https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=1059%3A59287 the position is even different. I think the best solution for now is to use what we have and find the best positioning in a followup task: https://linear.app/comm/issue/ENG-1133/make-menu-position-consistent-between-the-lists

tomek added 1 blocking reviewer(s): atul.May 12 2022, 8:15 AM

This revision now requires review to proceed.May 12 2022, 8:15 AM

Looks good!

(Personally think the designs on Figma are pretty odd, but that's what we're working off of)

web/settings/relationship/friend-list-row.react.js
44–61 ↗	(On Diff #12557)	It looks a little weird to have JSX passed directly to the `icon` prop of the `Menu` component to me. Wonder if pulling it out might be a bit cleaner? Don't feel strongly at all, either way is totally fine