`Option` component (presentation component similar to `Text`, `Number` and `Date`)

[olemartinorg]

Description

In the same vein as the other presentation components, we should have one for displaying a single option value (given an expression that returns an option value that matches one entry in the option list).

This should include both the option label, description and helptext button (configurable, but should probably default to show everything if given in an option list).

If we need support for showing multiple selected options in the future, we could probably call such a component Options (but that would possibly require support for lists/arrays in the expression language).

Example usage (in a table):

Example usage in vertical mode below a Text component (with all text resource bindings - which does not make sense, probably):

Example usage in vertical mode (with fewer text resource bindings):

Additional Information

Related:

• https://github.com/Altinn/app-frontend-react/issues/1669
• https://github.com/Altinn/app-frontend-react/issues/1494
• https://github.com/Altinn/app-lib-dotnet/issues/646

{
  "type": "Option",
  "value": ["dataModel", "some.path"],
  "optionId": "categories"
}

[olemartinorg]

We had a meeting about this. Notes here:

• I added a tag for org/brg, but later removed it. We discussed how this could solve a current issue for them in an app where two prefilled subforms display one-character values (S or K I believe), and where this component could utilize an option list to show the user something more informative (Selskapsregnskap and Konsernregnskap). However, as Subform does not have support for components in their table (currently), this does not solve that problem for them (yet).
• For the documentation, we should describe clearly when to use these presentation components, vs summary, vs other (Input with readOnly: true). There's a lot of components, and their distinct use-cases may be difficult to understand.
• We discussed if this should be a display option for the Dropdown component instead, or simply a summary of such a component. However, the basic need for this component has arisen because the current solution to this problem is to use a Dropdown component (for example in a RepeatingGroup) and hiding it (where it will only be visible in the table). If we made this a display option only, we'd have to do that for RadioButtons as well (and all other future single-choice option components?), and it still doesn't make much sense to configure a "Dropdown component that should only display the chosen option, not the Dropdown itself".
• We also discussed if an Option something other than Text, or if we could just bake this into the Text component. While in some cases the value will only be a simple text, we would have to look up the value and translate it via the option label. The expression language currently does not support picking an option label (also not a helpText and description). And if it was just a Text component, that does not have support for showing the helpText button in its value. For that to work we'd have to support templating via expressions, i.e. making the app developer write and concatenate HTML. That is undesirable, also because it prevents us from being able to control styling and design.
• Naming - it this clear enough? It could be confusing when picking between components. We didn't find any better suited name, but we discussed if possibly all these presentation components should be named as such from the start, i.e. PresentationText, PresentationNumber, etc. Still, we hope Studio categorized these components to indicate how they differ from (for example) form components.
• Design and font sizes needs thinking through. In the screenshots above, the chosen option will display the same was as chosen options do in Radiobuttons, but in that component the options are labels for a radio button. In this case the chosen option should possibly be displayed more like text than a label, and it should probably match the Text component when used beside it.