11/Input/Radio and Multi-Select with Searchable Context

[catenglaender]

This optional Searchable Context Wrapper for Radio and Multi-Select inputs makes picking options from a large list of options less intimidating. When activated for those components, it adds a filter searchbar when expanded and a compact preview mode when collapsed.

This PR has yet to be approved by the JF.

Overview

Hey, everyone 👋
concept talks with @yvseiler, @oliversamoila and internal feature requests at Concepts and Training GmbH lead to the Searchable functionality that I want to present to you in this PR.

UPDATE: You can see the Searchable Input Context in action as part of the examples for the Radio and Multi-Select Input Components.

It aligns with findings from my previous paper commissioned by the University of Bern about complex forms: Splitting input into a condensed viewing vs editing mode can greatly simplify the presented data and clarify what selection has been set.

When collapsed it only shows the currently selected options making it easier to check settings at a glance. When expanded a search field helps to quickly find a known option.

It supports multi-select and radio fields as a method of input, but could potentially be expanded to other fields (e.g. tree)

We think this addition to the UI components is a good candidate for the selection of content styles in the page editor. We would like to submit this for consideration when moving from legacy UI to Kitchen Sink UI.

For more details have a look at the description added to the PHP factory.

Thanks

I used to be mostly a frontend designer and this is one of my first "real" PHP and JS ES6 projects, so there might be some rough edges that still need to be refined during further implementation. Thanks to the ILIAS developer documentation, the very clean and clear implementation of most existing UI components and the the patient guidance of @rklees and @nhaagen, I had quite a good experience digging into this challenge.

Project Overview & Progress

• PHP interface
• PHP factory
• PHP class implementation
• PHP Renderer for current proof-of-concept state
• PHP kitchen sink documentation
• JS factory
• JS class implementation
• SCSS style code
• Examples
• approval of JF needed
• PHP/JS remove debug messages
• PHP use translation strings in renderer
• PHP Examples fix submitting of the form data (or remove it)
• PHP checker passes
• JS ESlint passes
• (S)CSS Squad topic: should forms in ILIAS 11 move from media queries to container queries?
• SCSS refine paddings and margins
• PHP unit tests
• PHP code review
• JS code review

Did I miss anything? 😄

[klees]

We'll do some internal QS before we move on in the community process.

[yvseiler]

A big thank you @catenglaender for this work and a big step towards a very valuable UI component to simplify forms. I like it!

[catenglaender]

The Select Search UI component has been dissolved to be part of the Radio and MultiSelect Input component.

[catenglaender]

More specific Unit Tests have been added. All automatic checks pass. ✔️

I think we can move on with the community processes. What do you think @rklees?