givewp
givewp copied to clipboard
impress-org
Epic: Two Panel (steps) form layout
Resolves GIVE-150
Description
This epic adds a Two Panel (steps) form layout to the visual form builder.
Includes the following PRs:
- #7171
- #7166
- #7173
- #7184
Affects
- Existing multi-step forms (under the hood)
- New form design/layout
Visuals
Testing Instructions
New layout
- Create a v3 form
- Go to design mode and select the new "Two Column (steps)" form design/layout
- Publish and view the form
- The layout should match the design
Existing multi-step layout
- Make sure the existing multi-step layout works as expected
"Show header" settings
- On multi-step and two panel make sure the show heading settings works as expected
Pre-review Checklist
- [x] Acceptance criteria satisfied and marked in related issue
- [x] Relevant
@unreleasedtags included in DocBlocks - [ ] Includes unit tests
- [ ] Reviewed by the designer (if follows a design)
- [ ] Self Review of code and UX completed
@jonwaldstein @pauloiankoski This is what I'm seeing when I select the layout. 😬
@jdghinson I'm not loving the card layout for this — i.e. the fact that the header just looks like a card beside the form. They don't look connected in any way, which doesn't as clearly associate them to me. It feels like two completely separate things. It also doesn't look good without an image or long description in the header — but I'm guessing the design settings introduces that?
cc: @jonwaldstein
@JasonTheAdams what you are seeing in the builder preview is the current expected behavior. It's a limitation of the form builder preview and is something we have been talking about improving (this is part of the whole VB prep project). That is not something we can solve for this specific project as we are only introducing a new layout to an existing framework. Although, I agree the form builder's preview experience lacks some good UX, the most important part is what happens on the donor facing front-end so we have to pick our battles.
@JasonTheAdams also confirming the header image field is being included in design settings - this layout is not responsible for adding that setting.
@JasonTheAdams what you are seeing in the builder preview is the current expected behavior. It's a limitation of the form builder preview and is something we have been talking about improving (this is part of the whole VB prep project). That is not something we can solve for this specific project as we are only introducing a new layout to an existing framework. Although, I agree the form builder's preview experience lacks some good UX, the most important part is what happens on the donor facing front-end so we have to pick our battles.
@jonwaldstein I totally get what you're saying. To be honest, I'm not comfortable releasing this feature like this. It just looks bad, and I don't want that to be someone's impression. They don't know we're going to follow up and fix it.
@JasonTheAdams i'm assuming you don't like the overlap of the sidebar right? @jdghinson and I were just discussing this and agree that should be improved along with the fluidity of the canvas - more like the native WP editor. However, that's an existing experience right now - and frankly has been that way since we launched 3.0. If you are looking on a normal sized browser that's not in full screen mode - which would be a common scenario - you are going to get a sidebar overlap. The good news is you can also toggle the sidebar to close it - it's not the best experience but it does offer a way to view the entire preview.
I think releasing this prior to form builder improvements would be a call @angelablake should make. I personally think people would be more excited to use this on their website right now (as requested) and won't care as much that the sidebar overlaps inside the form builder preview because the majority of value is what donors actually see and use - not necessarily the admin.
@JasonTheAdams I'm not sure I understand what doesn't look right. To me, this looks exactly like the design, just without the header image, which will be released with Design Settings.
Design Settings are supposed to release before the Two Panel layout, so we should have a chance to see what it will really look like before releasing. However, we could consider adding a default header image, so it doesn't just look like a card before the admin adds an image themselves. @jdghinson may have already accounted for that.
The only other difference is that the design was done on a white background, and the Visual Builder's canvas has a gray background, which does make the two columns look more "separate." Not sure how much we want to try and control background color.
@JasonTheAdams i'm assuming you don't like the overlap of the sidebar right? @jdghinson and I were just discussing this and agree that should be improved along with the fluidity of the canvas - more like the native WP editor. However, that's an existing experience right now - and frankly has been that way since we launched 3.0. If you are looking on a normal sized browser that's not in full screen mode - which would be a common scenario - you are going to get a sidebar overlap. The good news is you can also toggle the sidebar to close it - it's not the best experience but it does offer a way to view the entire preview.
I think releasing this prior to form builder improvements would be a call @angelablake should make. I personally think people would be more excited to use this on their website right now (as requested) and won't care as much that the sidebar overlaps inside the form builder preview because the majority of value is what donors actually see and use - not necessarily the admin.
@jonwaldstein I understand and appreciate that technically this bug has been in place for a while — i.e., the form builder is not properly responsive. That said, we've not had any form layouts as wide as this, so on a typical laptop the design mode has looked fine. But now, on my 16" screen at full width, and even if I go full screen, it just looks bad with the design settings going over the form.
I suppose I'm channeling my inner Devin here when I say that I'm just not a fan of the initial impression this gives the user. It would be one thing if this was tucked away, but it's literally the first thing they see when making a new two-panel form. It is @angelablake's call, but I wanted to be transparent that I personally wouldn't release it like this.
@JasonTheAdams I'm not sure I understand what doesn't look right. To me, this looks exactly like the design, just without the header image, which will be released with Design Settings.
Design Settings are supposed to release before the Two Panel layout, so we should have a chance to see what it will really look like before releasing. However, we could consider adding a default header image, so it doesn't just look like a card before the admin adds an image themselves. @jdghinson may have already accounted for that.
The only other difference is that the design was done on a white background, and the Visual Builder's canvas has a gray background, which does make the two columns look more "separate." Not sure how much we want to try and control background color.
@angelablake You're totally right that it looks like the design. Admittedly, I haven't seen it, yet. I'm not sure if I was supposed to. I'm cool with it going out like this, I just wanted to be honest that I think it would look better as a single frame with a separator, rather than two side-by-side cards with a gap in between that the background color pokes through.
@JasonTheAdams Ah, I thought you saw the Two Panel designs. I get what you're saying, but I think we can release the current design and look out for customer feedback.
If the canvas responsiveness is the main hold back for release, I'd like to know what kind of time and effort that would involve before forming a strong opinion. @jonwaldstein is that something that could easily be fit in alongside development of the second Two Panel design (tabs)? We're still waiting on Design Settings anyway ... how long of a delay might we be looking at if we wanted to fix the canvas responsiveness as well?
@jonwaldstein I'm betting this hasn't been tested out with the modal display mode of the form block/shortocde. When working on the Illuminate site I noticed that the modal is not responsive, and that the iframe has an inline style of width: 32.5rem. I get the sense we could never get the width resizing working properly (looks like @JoshuaHungDinh built it out). This is going to be a challenge with the modal for different layout sizes if we don't figure it out.