11/Input/SearchableSelect UI component

[catenglaender]

This is a work in progress UI component, 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 Select UI component that I want to present to you in this PR.

The Searchable Select makes picking options from a large list of radio or checkbox options less intimidating.

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.

We think the UI component 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!