[4.0] Usability: Component and Item radio group options styling is not working properly

[machadoug]

I'm testing my extensions with Joomla 4.0 and I noticed a couple of styling issues with the options from the XML files.

The Lists requires two clicks in order to select an option, therefore when we have up to 4 options we always use radio buttons in order to improve usability. However the class="btn-group" is not working properly.

Example XML Code

<field name="gmaps_linkToGoogleEarth" type="radio" default=""
		class="btn-group" useglobal="true"
		description="CE_GMAPS_LINK_OUTPUT_DESC">
	<option value="gmaps">CE_GMAPS_LINK_OUTPUT_OPT_GOOGLE_MAPS</option>
	<option value="gearth">CE_GMAPS_LINK_OUTPUT_OPT_GOOGLE_EARTH</option>
</field>

Expected result

XML options using useglobal=true in Joomla 3.8

Actual result

XML options using useglobal=true in Joomla 4.0 Alpha2

Result after proposed changes

Solution

Add the CSS code .btn-group.radio{display:inline-block} to
joomla-cms/templates/cassiopeia/css/template.min.css

Also, the Use global should be blue (Bootstrap primary class), therefore we need to remove the btn-outline-primary class from the label.

[houndci-bot]

Opening curly brace in a single line rule set { should be preceded by at least one space
Declaration should be terminated by a semicolon
Colon after property should be followed by at least one space

[brianteeman]

Obviously the switcher doesnt support more than two options or it wouldnt be a switch

[C-Lodder]

Grouped buttons will derive from custom elements, so probably not muh point in trying to fix this here

[Bakual]

@brianteeman This is not about the switcher. It's about radio buttons (button groups). The switcher uses the class "switcher".

[machadoug]

@Bakual , I wrongly mentioned the switcher, therefore I removed my comments about it in order to avoid any confusion.

@C-Lodder, the template Javascript file /administrator/templates/atum/js/template.js implements grouped buttons, therefore IMHO it should be fixed here.

[dgrammatiko]

therefore IMHO it should be fixed here.

Nope! That code was wrongly put there it belongs to the field that actually renders those inputs. We'll fix this when we'll move the code to the custom elements. On our todo list

[machadoug]

@dgt41 great to know. Thanks.
Anyway the Javascript code needs updating in order to display correctly the colors. In my last change to administrator/templates/atum/js/template.js I've fixed the colors based on the value.

[ghost]

We'll fix this when we'll move the code to the custom elements.

@dgt41 Can this Pull Request be closed?

[dgrammatiko]

@franz-wohlkoenig nope, let's get some tests and merge this. Later on we'll move the code where it rightfully belongs

[brianteeman]

@dgrammatiko what is the status here?

[C-Lodder]

I believe this will throw the error:

Undefined variable 'j'

Seeing as the addition for loop was removed where this variable was declared

[sanderpotjer]

@wilsonge @franz-wohlkoenig no activity for over a year. Suggesting to close this one.

@machadoug thanks for your PR! If you would like to get this in Joomla I recommend opening a new PR against the latest 4.0-dev branch.

[ghost]

closed as stated above.