Add support for custom css class names for afform containers.

[twomice]

Overview

Add support for adding custom class names (html 'class' attribute) to afform containers.
Similar to #32266 (which does the same for afform fields).

Ref: https://lab.civicrm.org/dev/core/-/issues/4571

Before

No way to add custom class names for containers in afform UI.

After

Now you can.

Technical Details

Unlike fields, containers are already using the 'class' attribute for special af-*-prefixed classes such as 'af-layout-rows' etc.

• This PR adds custom class names by prefixing them with af-container-class-, while only displaying the 'un-prefixed class name' in the UI.
• E.g. if you add a class name my-class:
  • The string my-class appears in the UI.
  • The actual added class name is af-container-class-my-class.
• I acknowledge the downside: this could lead to confusion if the user is looking for the CSS selector div.af-container.my-class, when in fact the correct selector would be div.af-container.af-container-class-my-class.

Comments

I'm sure there's a more elegant way to do this, even if we accept the downside mentioned above.

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[colemanw]

@twomice what's the purpose of the prefixing?

[twomice]

what's the purpose of the prefixing?

Short story: It's the only way Allen could figure out to make it work at all.

Longer story:

It's a kind of namespacing, I guess. AF is already storing its own af-* class names in ctrl.node['class'], so I struggled to find a way to reliably identify the classes that were added via this "custom class" field.

If we were just adding class names it wouldn't matter, but we also have to "read only our class names" (for display in the field) and also sometimes "remove only our class names" (when, say, the field is cleared).

So, yeah, the prefixing is my "novice first-time afform hack" solution for the fact that ctrl.node['class'] is already in use for other purposes.

[colemanw]

@twomice ok that makes sense. I think we could make a whitelist of the formbuilder-controlled classes and filter those out of the equation.

[twomice]

@colemanw Yes, that would be somewhat better.

But also this: On Kurund's PR, there's already discussion of NOT allowing free-form text entry for class names, and instead using an optionValue list. I think that approach would also help solve this "namespacing" issue in this PR (along with equivalent usability problems mentioned in that discussion).