search

backdrop / backdrop-issues

Issue tracker for Backdrop core.
144 stars 40 forks source link

[UX] Blocks: Style settings: Improve the UI for selecting between the 2 available options #6622

Open klonos opened 3 months ago

klonos commented 3 months ago

When you configure a block, there is a "Style settings" fieldset, which allows you to specify custom CSS classes for the block. There's a "Style" select, with two options:

When trying to explore what options are available under that fieldset, it is not directly obvious what these 2 settings do. Since there's only 2 options, I believe that we can convert that to a radio set with individual description texts for each option. Even further, since one of the options is "Default", perhaps we can reduce this to a checkbox with an appropriate label, so that there's not need for any help text.

avpaderno commented 3 months ago

Would a radio set allow to hide the fields that are not used, including the not selected radio?

klonos commented 3 months ago

Would a radio set allow to hide the fields that are not used ...

Yes, that can be done using #states 👍🏼

...including the not selected radio?

That sounds impossible to me. A bit like inception ...if the not-selected radio was hidden, then how would you select the option if you needed it to be selected? 🤔 ...perhaps I'm not understanding properly what you said.

avpaderno commented 3 months ago

I apologize: I was brainstorming the possible ways to change the setting form.

In this case, since JavaScript states are already used, I would keep the selector element that is used now and add two descriptions that are mutually visible basing on the Style value. (This is possible when the descriptions are rendered using two item elements.)

In this way, the form would take less space, and it is possible to move the descriptions where it is more appropriate.

avpaderno commented 3 months ago

I would not propose to always use JavaScript states to hide descriptions. I propose it in this case because there are already form elements that are shown/hidden basing on the value selected for a form element.