[4.0] Flex based control-group fields

[ciar4n]

Pull Request for Issue #27558, #27681, #27676 #27664 .

Summary of Changes

Moves field control-groups to flex.

• Less CSS required
• Flex naturally supports RTL so no RTL CSS required.
• Media queries look at the width of the viewport and are the only way to change the orientation of the current control-group fields. Flex would allow us to change the orientation of the field depending on the space available to it. A much more versatile and safer way to approach responsive fields especially.
• Duplicate CSS removed
• Fixes form-vertical class

Simply put, with this PR, label/fields will become container aware, moving from vertical to horizontal aligned if the field is reduced to less than 210px. I have also enabled the form-vertical class. The addition of this class and the field will always display vertically. The fields-no-margin has been removed completely.

Edit: Any field in a multi-column layout, displays in a vertical format regardless of the space available to it. This was always the case.

Testing Instructions

Apply this patch and run node build.js --compile-css for updating the changed SCSS. Check fields display correctly.

Documentation Changes Required

[Fedik]

Less CSS required

I thought Joomla! 4 use scss 😋

[brianteeman]

Might be me doing something wrong but something isnt right with the switcher now

Before

After

[ciar4n]

@brianteeman Do you know of any reason why the switcher has a sr-only class on the label and then adds a second visible 'label' in the form of a legend within the field control? It seems strange and at odds with all other fields.

[ciar4n]

Switcher html...

<div class="control-group">
  <div class="control-label sr-only">
    <label id="jform_featured-lbl" for="jform_featured">
      Featured
    </label>
  </div>
  <div class="controls">
    <fieldset id="jform_featured">
      <legend class="switcher__legend">
        Featured
      </legend>
      <div class="switcher">
        <input type="radio" id="jform_featured0" name="jform[featured]" value="0">    <label for="jform_featured0">No</label>         <input type="radio" id="jform_featured1" name="jform[featured]" value="1" checked="checked" class="active">   <label for="jform_featured1">Yes</label>    <span class="toggle-outside"><span class="toggle-inside"></span></span>
      </div>
    </fieldset> 
  </div>
</div>

[brianteeman]

Yes. It was the only way to achieve the correct accessibility. But without checking the original pr I don't remember more than that

[ciar4n]

Does that mean only the switcher has the correct accessible html? If so then we can probably close this until all other fields are brought up to speed. Considering the switcher html, this PR would be quite different.

[brianteeman]

switcher is a fieldset and a fieldset requires a legend

[C-Lodder]

@ciar4n - The switcher is like this because you can't associate a label with multiple inputs...only a single input. The only other form fields I can think of that may need checking are checkbox/radio....but only when using multiple.

[ciar4n]

Ok thank you. I'm guessing we can't just move the sr-only class from the label to the legend?

[C-Lodder]

I think it's being used incorrectly so that the .control-label doesn't take up any space.

Instead the .sr-only should be moved to the <label> and a d-none class be added to the parent <div>

[brianteeman]

give me two seconds to check that. my memory is failing me but there must have been a reason I did it that way

[brianteeman]

changing the sr-only to being on the legend instead of the label seems to be ok. not sure I understand the d-none comment

[C-Lodder]

@brianteeman Form fields in Joomla have a label to the left of the field (220px in width or somthing). This isn't the case with the switcher. Instead it's to the right hand side.
So to hide that 200px gap to the left of the switcher, they've used sr-only on <div class="control-label sr-only">.

[brianteeman]

my brain isnt in gear sorry.

The label to the right is the label for the value of the radio = eg yes/no
the field label and legend are to the left

why I chose to hide the label and not the the legend is something I dont remember and looking at the original pr doesnt help me

[brianteeman]

corrected last comment

[ciar4n]

I've moved the sr-only from the legend to the label which fixes the switcher style issue.

[Quy]

Looks good!! Thank you.

[infograf768]

Anyone tested rtl ?

[Quy]

There is extra padding on the first field.

[Quy]

Anyone tested rtl ?

Yes, looks fine.

[ciar4n]

There is extra padding on the first field.

@Quy Top margin removed.

[Quy]

I have tested this item ✅ successfully on e476392

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27684.}

[infograf768]

Works fine here but one question:

@ciar4n
Is it possible to also correct the Global Configuration Text Filters tab in reduced window width (LTR and RTL)? Or shall we postpone this to another PR (if even possible)?

[ciar4n]

Outside the scope of this PR but as a quick fix I have added the table-responsive class to the table which basically adds a horizontal scroll on smaller screens. This area is in a table which will always be an issue on smaller screens. Maybe something like #13769 could be applied if the horizontal scroll is not sufficient (separate pr).

[brianteeman]

We have a PR for the permissions already see #27670

[infograf768]

@ciar4n
Better, but not enough indeed. specially for the dropdowns.
may I suggest a change?

add

#page-filters .custom-select {
	width: auto;
}

in administrator/templates/atum/scss/blocks/_form.scss
towards the end of the file.
npm

Before patch

After patch

[ciar4n]

@infograf768 I'll leave it for a separate PR. As mentioned there is a PR for the permissions already. This PR is for the field control-group. The permissions is not even in a control-group.

[infograf768]

This proposal above does not concerns Permissions, but the Text Filters.
#27670 concerns only Permissions... and works well for that.

[infograf768]

I have tested both Permissions PR and this PR.
They are Ok for what they do.
Will make a new PR for Text Filters after they are merged.
In the mean while, I merge this one as it solves many issues.

[infograf768]

Tks.

[ciar4n]

Thank you for the tests!