UX: Add other widgets than select

After discussion with @pdureau.

In a first time we will provide a checkbox instead of a select list when a style has only one option.

Discussed with @pdureau.

The problem with checkbox is that the plugin title is used directly has the checkbox label, and no more the value label.

No satisfying solution for the moment.

Splitting other widgets and groups into separated issues.

Reviewing.

Putting into needs work as of current review comments and also needs automated tests.

Taking care of some review comments during rebase.

I pushed some refactoring.

I did not had the time to fix coding standards and write tests yet, as there are still some stuff remaining.

Main part will be to update the CSS to work outside of Gin / Gin LB.

@maboy do you want to retake the issue? do you want to see it in pair programming?

Introduced a lot of tests and converted to PHP attribute discovery.

TODO:
- comment 18
- discuss about the @todo and question marks.
- update CSS to not rely on Gin
- update documentation, examples. Where? In readme? on drupal.org doc pages?

After discussion with @maboy and @pdureau,

TODO:
- comment 18, @Grimreaper
- Fix the @todo and question marks. @Grimreaper
- take previewed_as hidden into account @Grimreaper
- update CSS to not rely on Gin @maboy

If Gin specific stuff will be needed when using Gin LB, let's see to make an issue and MR on Gin LB.

Updated TODO:

- one new review question to answer
- update CSS to not rely on Gin @maboy

Thanks @maboy for the new CSS. Looks pretty good!

The only thing I wonder now is in term of accessibility if the fake selects are ok. But I guess assistive technologies still see radios buttons.

With Claro:

With Gin and Gin LB:

I have created an MR on #3426449: Update styles declaration to use UI Styles sources in WIP with a beginning of icons. This will ease the testing.

@rajab suggested "Radio Image widget in core" during UI Suite monthly meeting.

@Rajab Natshah

The only thing in core I found regarding a "radio image widget" in core is core/lib/Drupal/Core/Render/Element/ImageButton.php which is a submit button, so not what we search.

After a quick Google search, I found https://www.drupal.org/project/image_radios, is it what you had in mind?

With @pdureau we did other testing.

We tried to use the previewed_with also. It gives interesting results. Some previews are better, other are broken. See attached screenshots.

I put some todos in the MR to not forget stuff to explore, we are almost there but we are missing a mechanism to ensure we have nice previews.

Also potentially we will be able to have previews in the admin theme with #3453784: Stylesheet generator + CKE5 usage.

Note to myself for later :)

/ui_styles/stylesheet.css?prefix=.ui-styles-source-select-plugin: { minified: true }

+ re-adapt stylesheet.

@pdureau, if you can give a look at the current state of this issue with testing on ui_suite_bootstrap in #3426449-8: Update styles declaration to use UI Styles sources please?

I will fix tests and coding standards once we will agree on the solution.