UX: Add other widgets than select

1. Add StyleType plugin type
2. Add mechanism to guess default types
3. Add StyleWidget plugin type
4. Add Widgets plugins: Select, Radio, Checkbox, Number, ColorSelect & Toolbar

New widgets will be really helpful.
With new widget options, there is an overlay with layout options in certain scenarios, for example in case of layout paragraphs, we can add same setting either using UI Styles or layout options.

Hi Sharique, the widgets are only bringing improved UX for existing styling features.
Styles are still list of mutually exclusive options. Each option is still a CSS class.

We are not introducing other data types like booleans, integers...
So, if there is an overlap with Layout Options, it must be already the case. Do yo usee it?

I see overlap in case of layout paragraphs, because we are using extensively. And this is already in a way. Not sure about other scenarios.
Anyway we can revisit this later.

@maboy Nice! Thrilled to use this. Does it make sense to review the status quo now?

In ✨ Provide more options to drive the display of the UI style form Active vbouchet has proposed:

Alter the default "-None-" option to another label (for example, for a plugin around "Borders", "No border" makes more sense from a contributor standpoint).

Why not... Maybe a new property like this one from Form API:

#empty_option: (optional) The label to show for the first default option. By default, the label is automatically set to "- Select -" for a required field and "- None -" for an optional field.

Let's credit him if we add this feature.

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?

Grimreaper → closed merge request !2

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

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.

Grimreaper → credited vbouchet → .

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 📌 Update styles declaration to use UI Styles sources Active in WIP with a beginning of icons. This will ease the testing.

Grimreaper → credited Rajab Natshah → .

@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 ✨ ckeditor5-stylesheets generator Needs work .

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?

Automatically closed - issue fixed for 2 weeks with no activity.