[Visual bugfix] Match the original mockups for PastanagaUI in regards of the error messages in form field elements #5115
Conversation
…e first field is one of the errored fields.
✅ Deploy Preview for volto canceled.
|
|
@sneridagh the gap LGTM. One observation that we got from our client was that they do not see that they can enter something into the input fields that are just red blocks. There is no way a user can tell that the red block is actually an input field. I am wondering if we could change this and use a red border instead. Though, I understand that this might be too intrusive and a change that we can only apply in Volto 17. |
|
It's a small improvement. I hope that there is a larger plan to overhaul the design of inputs to actually resemble plain old familiar HTML5 inputs instead of lines that don't look anything like an input. |
|
@tisto I did a bit of archeological investigation after your comment. You won't believe what I've found, but it seems that we never finished implementing the initial PastanagaUI form style guide. In fact, the red background comes directly from SemanticUI (!!). These are the original PastanagaUI form elements mocks: 
So, we could discuss with the team and treat this as a "fix" since it never had the original intended style (although years have passed :P ) |
|
@tisto @stevepiercy of course, there is always Quanta style form elements in the horizon... |
|
@tisto @stevepiercy I can make it look it like this, as originally intended: 
|
Oh, you tease! 😉 Slides 26 and 43 for "before" and "after": https://www.slideshare.net/sneridagh/meet-quanta-plones-style-guide |
I much prefer this. Fewer monstrous red blocks without meaning, and it gives the hint of where to click. I think that would be good enough, assuming Quanta styles will arrive in Volto 17. |
|
@stevepiercy unfortunately, Quanta styles don't have a milestone yet... |
|
@sneridagh that would be awesome! Then we could just consider this to be a "visual bugfix" :) |
…regards of the form fields elements error messages
sneridagh
changed the title
|
@plone/volto-team Hi team! We realised of this situation this morning. It seems that for some reason, we didn't realised that we never fulfilled the original PastanagaUI mocks in regards of the error messages in form field elements. Although this change, in a strict sense, would be considered a breaking change, I'd like to mark it as a "Visual Bugfix" and declare it as "non-breaking" in order to include it also in Volto 16. What do you think? Any opinions against it? Please let me know asap via this PR or privately. |
|
I'm +1 on merging it. It fixes bad UI. |
| .ui.form { | ||
| .ui.pointing.label:before { | ||
| content: initial; | ||
| } |
There was a problem hiding this comment.
@sneridagh I think we should remove pointing from https://github.com/plone/volto/blob/master/src/components/manage/Widgets/FormFieldWrapper.jsx#L99 instead of changing the styles for .pointing. Semantically, nothing is pointing at anything now.
We could also add a new class in FormFieldWrapper and apply our styles to that class. I think that would help avoid breaking changes because if someone has shadowed FormFieldWrapper.jsx, the appearance won't change.
There was a problem hiding this comment.
@davisagli done, please take a look.
|
Very welcome enhancement. Maybe set flex-grow on class wrapper to 0. That would align the border at the bottom of label and field.
|
|
@ksuess thanks for the heads up! Pushed! 
|
… of the error messages in form field elements (#5115)
Bug
Edit: It seems that we overlooked the original error messages in PastanagaUI form fields elements for over six years (shame on us) without noticing (or caring).
We realised (about time), when trying to fix this overlap:
Original mockup
This is the original mockup from the original PastanagaUI mocks:
Fixed version