Design tweaks

[alyblenkin]

Sadiq and I discussed making small iterative improvements every month. So we will keep a running list and then evaluate, what we want to prioritize when the time comes. We can also separate some of these out into their own issues.

Errors

• Error banner: "Fix errors" button needs to move to the right slightly (so the top, bottom, and right all have equal padding)

Textfields

• Discuss: outlined texfields like the Vue component
• Shorter textfields and for multiple-line appearances (is it possible to use fields appropriate to the length of the input, like names, numeric questions etc).
• The selects look a little taller after the primevue update. We want to reduce the height and spacing between each option.

Multi-selects

• Add chips for multiselects

From #164 (comment)

• Language menu in wide view should be its widest available width and keep a consistent width when switching languages
• would be nice to not show validation placeholder where a field will never show a validation message (i.e. has neither a constraint or required expression) - Needs better engine support
• Some way of visually distinguishing UnsupportedAppearance (and similar dev-focused components, maybe worth having a base component for them to compose)
• FormHeader.vue:
  • .smaller-screens .print-button doesn’t render justified end when form has no translations
  • Consider changing toggle of language menu visibility to languages.length > 1. (It’s not common, but I’ve seen some forms define only a single language; also worth considering suppressing languages in the engine for this scenario instead)
  • .smaller-screens shadow looks larger/heavier than design. Much closer if we replace the current filter rule with:
  • position: relative; /* to ensure shadow is visible */
  • box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  • This does differ from the styles produced by Figma. I suspect we’ll need similar finesse/eyeball comparison for other styles we derive from the designs directly
• There’s a layout shift when validation message is shown/hidden within rows of FieldListTable
• Remove elevation on tablet and mobile so that everything is flat and consistent with Collect's new app bar.

[alyblenkin]

We are going to break this into new stories