Add selects with images

[alyblenkin]

Description

Add selects with images

---

Checklist

• Does it need UI/UX design?
  • If yes, describe the UI/UX requirements or attach a Figma link in the "Design" section.
• Does it need API design?
  • If yes, specify the endpoints, methods, or data structures needed.
• Does it need design around state flow?
  • If yes, outline the state flow requirements.
• Does it need a test plan?
  • If yes, add the test plan as a comment in this task or attach the document.

---

User Story

• As a form designer,
  I want add selects with images with different appearances
  so that so that data collectors can have a visual reference when selecting choices.

Appearances for select one/multiple

• Use columns appearance when no appearance is specified

  • display the options in columns depending on the size of the images and device
  • fixing the height to 300px and width flexible (same as the image question)
  • set breakpoints for different number of columns (based on rules from the text selects)
  • columns all have the same width (determines the max width of each image)
  • if the image is smaller than 300x300px, we add a grey background
    Figma link

• Grid: columns appearance
  Same as the new default for no appearance above
  Figma link

• Grid: columns-pack appearance
  Try to accommodate as many options as possible in a single line as possible per device and scales down accordingly per screen size. For users who want to conserve space to prevent the user from scrolling to see more options. Not ideal for accessibility.
  Figma link

• Grid: columns-n appearance
  Users can decide the number of columns and enforce that number (2, 3, 3+), but it caps at 10.
  Figma link

• Images, no buttons
  No formal button in the label area, but the option is highlighted with a tick in the corner. The user can tap anywhere on the image.
  Figma link

• Long label
  We don't want to truncate information so the box will keep expanding. Other options should also expand so everything in that row should be the same height.
  Figma link

• Disabled state
  Images should still be partially visible with 60% opacity for the images with disabled text styles.
  Figma link

• Loading images
  When images take longer to load, the user will see a visual placeholder of the content, so they know something is happening. The label will still be visible.
  Figma link

• Broken image
  If the image is unable to load, the user sees a image icon with a slash through it.
  Figma link

---

Dependencies

• [dependency]
• [dependency]

---

Additional Notes

• We discussed lots of different options and the tradeoffs of each here, final designs above.
• We want to give users tools to design more accessible and intuitive forms (just because it's possible to layer on lots of different appearances doesn't mean it's a good user experience). That could be a simple visual guide with do, don't, and caution in the docs.
• We also spoke about giving folks an icon library to make their forms more visual.
• Documented the experiments and assumptions here (e.g., use columns for the default)

Related Issues

• [issue link]
• [epic issue link, if applicable]

[alyblenkin]

@lognaturel I've started to flesh this one out and added some questions to figma. I'm worried that adding more than 5 images when you have a label and button will be pushing it. I think we could squeeze 7 for selects without buttons.

I didn't include likert, but I assume that's out of scope for this one.

[lognaturel]

I didn't include likert, but I assume that's out of scope for this one.

That's right.

[alyblenkin]

@lognaturel @latin-panda - I updated the epic. Please edit if I've missed something!

@latin-panda we may want to break this up into sub issues. Maybe we can pair on that so I break them down into manageable slices or you can take a pass?

I want to expand on some of the points in the additional notes section, but I'll do that in slack so we can determine next steps.

[latin-panda]

Thanks @alyblenkin; since the user stories and UIUX are clear, we can split the EPIC once we work on it.

[alyblenkin]

Do you think we should create a separate issue for when images don't load?

[latin-panda]

I think it's part of this work, it's okay to leave it here

[latin-panda]

Engine is ready, still working in the front-end