Consistent styling for readonly inputs
- Dominant language
- TypeScript
- Stars
- 38
- Forks
- 22
- PR merge metrics
- No merged PRs in 30d
Description
### Description
There's inconsistency with how we handle readonly fields. For standard text inputs we just display the value as text without an input at all, but for other types it's about 50% chance they will be rendered as text, and 50% chance they will be rendered as a disabled control. This is baked in to the engine so clearly something that was done by design, at least for some types.
For example, for geopoints instead of rendering buttons or maps, we just spit out the value, eg: "Accuracy: 0 m,Latitude: 50,Longitude: 50.". If instead we rendered a map with points that couldn't be moved that would provide more useful information for the user than the numeric values. It would also mean if the field were enabled (ie: the readonly value is based on a calculation), currently the form changes length and potentially causes the view port to jump. Instead if the readonly and editable versions were the same length then this calculation update would be more user friendly.
Where controls are used the readonly styling isn't great... some examples
- The rank control is hard to read because it has a "rank items" button that is disabled instead of just showing the current rank
- List groups, and selects with images have a hover behaviour which makes them look clickable
- Likert widgets have a select cursor which makes them look clickable
This form is a version of the all-questions form with every field disabled so you can see how it looks: https://github.com/user-attachments/files/25887068/all-question-types-v2024091201-4.xml
---
### Checklist
- **Does it need UI/UX design?**
- [x] Yes. Describe the UI/UX requirements or attach a Figma link in the "Design" section.
- [ ] No
- **Does it need API design?**
- [ ] Yes. Specify the endpoints, methods, or data structures needed.
- [x] No
- **Does it need design around state flow?**
- [ ] Yes. Outline the state flow requirements.
- [x] No
- **Does it need a test plan?**
- [ ] Yes. Add the test plan as a comment in this task or attach the document.
- [x] No
---
### User Stories
- **As a** user,
**I want** disabled maps to show a map not a numeric long+lat
**so that** I can understand the information.
- **As a** user,
**I want** inputs that are readonly to be obvious,
**so that** I don't try to interact with them.
---
### Design
- **Figma**: [Insert URL]
- **Design Docs**: [Insert URL
Contributor guide
No contributing guide indexed for this repository
Research direction
No source files, tests, or entry points are named. Start by reviewing the attached all-question-types XML and the rendering paths for readonly and disabled controls, then resolve the missing UI design decisions. Done should include consistent readonly presentation across field types, non-clickable styling, and an agreed treatment for disabled maps.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100