Quanta Form Styling?

[tisto]

Quanta comes with a new form styling. The new volto-form-builder might be a good chance to start implementing those new form styles:

@sneridagh did you talk to Albert about form styles recently? What do you think? That would be a chance for us to start with Quanta form styles without risking anything regarding Volto core. Once we have the polished CSS styling and validation for the forms here, we could easily apply those to Volto core.

Questions for Albert regarding the forms:

• what happens when the user clicks into a form field? (Angular Material like animation?)
• how do placeholders look like?
• how do longer field descriptions look like?
• how does a required field look like?
• what happens when a required form has not been filled out?
• how does a custom validation error look like?
• do validation errors show up in the field itself only or above the form as well?
• how do form wide validation errors show up
• what happens if the user successfully submitted a form (say the contact form)? Do we show an empty form redirect to the front page with a message or rather show a "thank you" page?

[tisto]

@iFlameing @sneridagh I guess we could just start by using the standard semantic UI form styling:

https://semantic-ui.com/collections/form.html

This looks like a sensible starting point to me and we can move on from there, what do you think?

[sneridagh]

Quanta comes with a new form styling. The new volto-form-builder might be a good chance to start implementing those new form styles:

@sneridagh did you talk to Albert about form styles recently?

I did, I have the answer for most of your questions.

What do you think? That would be a chance for us to start with Quanta form styles without risking anything regarding Volto core. Once we have the polished CSS styling and validation for the forms here, we could easily apply those to Volto core.

Not sure what you mean, what do you have in mind? Override all the possible CSS (over the SemanticUI ones)? That would be messy, and when you remove the original ones, your override will miss that "base" styles and you will have to review them all over again.

Questions for Albert regarding the forms:

• what happens when the user clicks into a form field? (Angular Material like animation?)
• how do placeholders look like?
• how do longer field descriptions look like?
• how does a required field look like?
• what happens when a required form has not been filled out?
• how does a custom validation error look like?

https://user-images.githubusercontent.com/486927/103340358-1dbd0f00-4a84-11eb-891b-cc2dff2c66ae.mov

• do validation errors show up in the field itself only or above the form as well?
• how do form wide validation errors show up
• what happens if the user successfully submitted a form (say the contact form)? Do we show an empty form redirect to the front page with a message or rather show a "thank you" page?

No answer for that last ones. We should start doing a list for Albert with all that ones.

So the video is from what it's already in: https://github.com/plone/volto-quanta

If you want to give it a try: https://github.com/plone/volto-quanta-project

[tisto]

@sneridagh that looks awesome!!! I guess the field grid is just for demo purposes, right?

Would it be possible to make volto-form-builder depend on volto-quanta to re-use its form styles? I suppose this is semantic UI with a special CSS styling, right? We should try to put some effort into making the semantic UI forms accessible if possible.

[sneridagh]

@tisto it's semantic-free :) See https://github.com/plone/volto-quanta/blob/master/README.md

[tisto]

@sneridagh I guess it is time for a strategic call then. :)