Page MenuHomePhabricator

[lib/native/web] introduce RemoveTagButton
ClosedPublic

Authored by ginsu on Jun 20 2024, 8:40 PM.
Tags
None
Referenced Files
F3336009: D12534.id41911.diff
Thu, Nov 21, 1:38 PM
Unknown Object (File)
Wed, Nov 13, 3:28 AM
Unknown Object (File)
Wed, Nov 13, 3:28 AM
Unknown Object (File)
Wed, Nov 13, 3:28 AM
Unknown Object (File)
Wed, Nov 13, 3:28 AM
Unknown Object (File)
Fri, Nov 1, 12:49 PM
Unknown Object (File)
Fri, Nov 1, 12:49 PM
Unknown Object (File)
Fri, Nov 1, 12:49 PM
Subscribers

Details

Summary

This diff introduces the RemoveTagButton. This button is used to remove a farcaster channel tag from a community

Depends on D12530

Test Plan

Confirmed that when I clicked on the button the tag was removed

w/o error message:

Screenshot 2024-07-02 at 12.20.14 PM.png (2×3 px, 1 MB)

w/ error message:

Screenshot 2024-07-02 at 12.20.18 PM.png (2×3 px, 1 MB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu added reviewers: inka, kamil.
ginsu added inline comments.
web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js
52–53

A subsequent diff will handle this

ginsu requested review of this revision.Jun 20 2024, 8:56 PM

The space under the channel name looks awkward without the error to me (seems too big). Is there any way we can change this? I can see in invite links modal, that when an error appears we change the size of the modal to add the additional needed space. Could that work?

image.png (1×1 px, 110 KB)

image.png (1×1 px, 120 KB)

Alternatively I think the space could just be smaller, similarly to how we display errors on the login screen:

image.png (958×812 px, 71 KB)

What do you think?

I can see in invite links modal, that when an error appears we change the size of the modal to add the additional needed space

I have gotten feedback in the past that this we actually should never change the size of the modal to add additional needed space; however, your second suggestion about making the space a bit smaller should work!

I am not reviewing this because I assumed that you plan to introduce the changes we discussed. Is this incorrect?

ashoat requested changes to this revision.EditedJun 27 2024, 9:57 AM

Passing back to @ginsu to "make the space smaller"

I can see in invite links modal, that when an error appears we change the size of the modal to add the additional needed space. Could that work?

This is a huge antipattern, and it's disappointing it got landed so recently. cc @tomek: modal dimensions should NEVER resize like this.

In general, I encourage everybody on the team to think more critically about UX. We don't have a designer on the team, which means we rely on developers to be thoughtful about UX. Having a modal that resizes on error (or really for any other reason) is a really, really bad UX... it's jarring, all of the buttons move, etc.

I hope such a design is never recommended, considered, or implemented on this team ever again.

In D12534#356252, @inka wrote:

I am not reviewing this because I assumed that you plan to introduce the changes we discussed. Is this incorrect?

I've found that more than anybody else on the team, you have a pattern or leaving comments without actions (accept or request changes). I think it would be more clear if you included actions more often. We've talked about this in retro and generally the only reason we'd want to avoid it is if there is somebody else on the reviewers list that you think should still have the diff in their review queue. I don't think that's the case here.

This revision now requires changes to proceed.Jun 27 2024, 9:57 AM
web/tag-farcaster-channel/tag-farcaster-channel-modal.css
28

Why do we need to hardcode height here?

web/tag-farcaster-channel/tag-farcaster-channel-modal.css
28

This was used to make sure that the height of the modal doesn't change when an error message is shown; however, I saw that in D12567, you mentioned we should use visibility: hidden over hardcoding the height here so will update this diff to fix this before landing

ginsu retitled this revision from [web] introduce RemoveTagButton to [lib/native/web] introduce RemoveTagButton.Jun 28 2024, 12:23 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added inline comments.
web/tag-farcaster-channel/tag-farcaster-channel-modal.css
27 ↗(On Diff #41818)

Reduced the space between the between the channel name and error message by 50% (8px => 4px)

ashoat requested changes to this revision.Jul 1 2024, 1:41 PM

I think it still looks bad. Can we try to decrease the space here? We can use position: absolute to get it to appear where we want

Screenshot 2024-07-01 at 4.40.41 PM.png (674×1 px, 86 KB)

web/tag-farcaster-channel/tag-farcaster-channel-modal.css
27 ↗(On Diff #41818)

Let's position this absolutely

This revision now requires changes to proceed.Jul 1 2024, 1:41 PM
This revision is now accepted and ready to land.Jul 2 2024, 11:54 AM
This revision was landed with ongoing or failed builds.Jul 2 2024, 1:44 PM
This revision was automatically updated to reflect the committed changes.