People: Update error pattern on invite screen

[sixhours]

Weird error pattern when trying to invite a user that already exists in that role.

Steps to reproduce:

1. Have a user added to your site as any role
2. Click invite to add a new user
3. Type the email address of the existing user in the same role
4. Note the bright red text, weird red error pop-up.

[sixhours]

It looks like the tooltip and error behavior is the TokenField component's default behavior, which is used elsewhere in Calypso. We should evaluate the impact of a component-level change on all areas.

Flagging Muriel for this as well. Tokens behave somewhat like Chips in Material guidelines. Perhaps we can use this as inspiration for a new error state design:

[scalarbane2]

Hello There! Here are the ideas I came up with for this screen

At this point, Any email or username that has an error will be red, when the user hovers over that field, the error message comes up as shown in the second screen.

I also tried removing the boxes around the field and this is what it looks like

While on mobile, the message shows by default

Let me know what you think: @cburton4 @drw158

[cburton4]

Hey @scalarbane2,

These are great explorations. I agree with @sixhours that in this specific instance following the chip pattern would create the cleanest user experience for customers as the container around the content gives clear visual definition where one input ends and another begins.

For consistency the spacing between the text and the icon should remain the same regardless of the text length.

All components should align to an 8dp square grid for mobile, tablet, and desktop. Most measurements should use an increment of 8dp to determine spacing, but the 4dp grid can be used in some instances for tighter spacing.

This is a visual example of what I mean when I say consistent spacing regardless of line length.

Let me know if you have questions or want additional clarification. Looking forward to this update 🙌

[scalarbane2]

@cburton4, I made the corrections you highlighted.

[davewhitley]

Also agree on following the Chip guidance from Material as close as possible. We should remove the hover tooltip in favor of placing the error message in the helper text (area below input field). You can see how it creates a not ideal experience for mobile with the tooltip floating above other text. We can also put the error icon next to the helper text.

Removing the hover tooltip I think would be best, but also the biggest change that might have the biggest unintended impact for areas that uses this component.

[scalarbane2]

Hello! So I tried taking the hover tip to the top and also explored another type of solution.

For this second one, I brought the error below the field. I personally don't feel right about this, but let me know what you think.

[sixhours]

I'm guessing this is not on Muriel's radar right now since it's not specific to Gutenberg. That said, I think we have enough here to start reworking the component with small steps forward. Moving to Development To-Do's.

[davewhitley]

@scalarbane2 The second screenshot is currently the closest to Material. Our suggestion is to just follow that unless there is a good reason to deviate. I personally would deviate a little bit by adding an error icon to the left of the error text in this screenshot. That'll help color blind folks.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.