[motion] Update animation in Pattern > Forms

[janchild]

On the Forms pattern page, there is an animation that needs to be updated:

https://www.carbondesignsystem.com/patterns/forms-pattern

Please update the server-side validation animation with the following changes:

1. the inline notification shouldn't cover the content. For correct layout, see this
   https://www.carbondesignsystem.com/components/notification/usage#formatting

2. Inconsistent terminology and obscure message. Address this with the following content update for the inline notification.

Server temporarily unavailable. The invite failed to send. Try again in a moment.

3. Leave the button with the original command "Send invite". Don't change the button text to Try again.

Assets

Unfortunately the original file is in Flinto, I'm not sure if this will help you but I attached it.

formExampleSSValidation_v3.flinto.zip

[johnbister]

First draft of this updated animation. Looking forward to reviewing and incorporating feedback as we move forward.

[jillianhowarth]

Hi John! This is looking awesome 🙂 Jan and I should have caught this when we made the issue, but is it possible to make the title "Invite users" instead of "Invite user"?

[johnbister]

Hey! No problem! Let me know if you need any other changes.

[shixiedesign]

• motion looks good, though hard to tell from gif. Happy to look at videos if you have them
• Not sure if notification should pop in from the bottom. Should it drop in from the top of the modal, and push content down? I get the sense it's more expected there.

[johnbister]

Thanks @shixiedesign mp4 is zipped. The original gif popped in from the bottom and I think the documentation supports that, but I could be wrong (still learning a lot about the design system :) ) Here is the original gif uploaded to the carbon site and some other documentation for context. Let me know if you'd like me to try another approach. Thanks!
1652_v2.mp4.zip

[shixiedesign]

This looks good to me! I think it 1. can be a tad faster and, there's a gap between the overlay spinner disappears and the banner comes in. Reduce this gap by 2. using entrance easing or just make sure there's no delay in between. I think it's testing user's patients a bit there.

Still feel like position of the banner should be on top of model. But that's a visual thing not related motion. Note however if the position of the banner is going to be moved top, the motion should update to moving down, sort of dropping in and pushing content lower

[johnbister]

Thanks! I'll use entrance easing and cut the delay between overlay spinner and when the banner comes in for the next version.

@jillianhowarth @janchild any thoughts on the position of the banner? Do you think it should come in from the bottom or the top?

[jeanservaas]

@johnbister

Just discussed this with @jillianhowarth and I think we like the position of the server-side notification where it is now, at the bottom near the button.

For Login, because there are only ever two fields, and the error is a non-specific field error, we do put the notification at the top, but for other much longer forms, the user's attention is at the bottom of the form when they are submitting, it would not make sense to position the notification at the top of the form.

[janchild]

FYI, @johnbister

Yes, I agree @jeanservaas.

Also the position does fall in line with the guidance provided on the Modal component usage page here --> https://www.carbondesignsystem.com/components/modal/usage#validation. The error is a server-side validation message and should use an inline notification.

If the data was not able to be submitted due to server-side issues then an inline notification should appear.

[johnbister]

Thanks for the clarification on the notification position! I sped it up a tad and removed the gap between the overlay spinner disappearing and inline notification appearing. Hope this works now!
1652_v3.mp4.zip