Design tweaks - Githubissues

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

[x] 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 https://github.com/getodk/web-forms/pull/164#issuecomment-2297309308

[ ] 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.

getodk / web-forms

Design tweaks #172