Problem/Motivation

Improve documentation and test coverage.

Steps to reproduce

Proposed resolution

  • Add a kernel test CssGeneratorTest which tests behaviour of the advancedform.cssgenerator service with various inputs & expected outputs
  • Add a CssGeneratorInterface and allow the service to throw an exception if the rules input is invalid?
  • #3387723: selected-xxx classes not removed on select updates Add FunctionalJavascript test to ensure that classes are correctly added/removed from node form when terms are selected/deselected
  • Document steps to set up a content type, term and complex field so that behaviour is documented
  • Document syntax for CSS rules

Remaining tasks

User interface changes

  • Improve documentation of rules syntax
  • Improve documentation of how to use

API changes

  • Interface for CSS generator

Data model changes

Issue fork advancedform-3387680

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

xurizaemon created an issue. See original summary.

xurizaemon’s picture

xurizaemon
he/him
Location Ōtepoti, Aotearoa 🏝
commented

Steps to configure term-based behaviour

  1. Create a content type "page"
  2. Create a term "page subtype"
  3. Add two terms, "standard" and "complex"
  4. Add an entity reference field "page subtype" to the page content type, referencing the term
  5. Add a field "complex field" to the page content type
  6. Configure rules so that "complex field" is shown when the term selected is "complex" (class is "selected-standard" or "selected-complex" on the node create form
  7. Go to node edit or node create, use term selector to determine field visibility

xurizaemon opened merge request !10

xurizaemon’s picture

xurizaemon
he/him
Location Ōtepoti, Aotearoa 🏝
commented
Related issues: +#3387723: selected-xxx classes not removed on select updates

Adding related issue #3387723: selected-xxx classes not removed on select updates where test coverage for fields hidden by select option conditions is added.

xurizaemon’s picture

xurizaemon
he/him
Location Ōtepoti, Aotearoa 🏝
commented
Issue summary: View changes
xurizaemon’s picture

xurizaemon
he/him
Location Ōtepoti, Aotearoa 🏝
commented

What threw me about this was that the rules syntax seems to ask you to incorporate a space, OR to add an additional selector inside the square brackets.

Actual usage "in the wild" appears to be like this (now "documented" in the test coverage):

.node-page-form:[.selected-standard-page .field--name-field-intro]

This will generate:

form.advanced-form-filtered.node-page-form.selected-standard-page .field--name-field-intro {
  display: none;
}

Which works because .selected-standard-page is applied to the create/edit form when term "Standard Page" is selected in a term <select>.

Without the class inside the square brackets, I found I had to include an additional space to make the selectors work, and that felt unintuitive.

Honestly the whole "rules to CSS" thing feels unintuitive and I'd probably use SASS today and keep the JS, but that's another issue.