getodk / getodk/web-forms

Improve layout of select questions with list-* appearances

Open
#179 4 comments 0 reactions 0 assignees View on GitHub
front-end needs ui/ux design
Dominant language
TypeScript
Stars
38
Forks
22
PR merge metrics
No merged PRs in 30d

Description

1- Alignment of column heading and radio button is out after adding `question-container` for showing red background for invalid questions.

![image](https://github.com/user-attachments/assets/606d81a2-2207-4930-9e1d-805fa300bb7b)

2- We also need to test how the `Group` component with `field-list` appearance renders when there are non-select questions with select questions (with list/nolabel-list appearances).

3- From https://github.com/getodk/web-forms/pull/164#discussion_r1690286434

> However, thinking about whether it is actually dynamic got me to take a closer look at tableLayout. It's also a bit surprising to me that it's computed, at least with the computation it performs. I wouldn't expect it to ever change state (although I admit this is sort of a downside of conveying children as state/reactive regardless of the parent node's type). On the other hand, the way I would expect it to be dynamic is if it took relevance into consideration.
>
> I don't want to address that now, but I do think we should file an issue. And when we get there, I'd like to think about how we can generalize relevance-aware logic: partly so it's composable/reusable because there are probably other places we'd want to do something similar, but mainly as a way to help us remember that relevance is a thing to consider in conditional presentation logic of this sort.

From https://github.com/getodk/web-forms/pull/164#issuecomment-2297309308

> (Not directly related to PR, want to track as it’s come up in recent conversation) FieldListTable naming is confusing. I think we’ve both repeatedly associated it with the field-list appearance, but it is not.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the select-question cases with list and nolabel-list appearances, including a Group with field-list alongside non-select questions. Inspect the question-container alignment and the tableLayout or FieldListTable behavior described here. Done means the heading and radio button align correctly and the listed combinations render as expected; the naming concern should also be clarified.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.