Closes #3567 Styling adjustments for the AZ Finder exposed form (AZDIGITAL-158)

[bberndt-uaz]

Description

The goal of this PR is to establish a more uniform presentation for the taxonomy term filters in the AZ Finder exposed form.

This PR proposes the following styling changes to the AZ Finder exposed form:

1. Adjust the horizontal alignment of filter items so that collapsible parent terms (with plus/minus buttons) and leaf terms (terms with checkboxes and no children) have a matching layout.
   • Checkbox items have been converted to display: flex as part of this change.
   • Similar to the change we made to footer menu links, the line-height of filter items has been reduced to improve the display of multi-line text.
2. Standardize the spacing of nested filter items (whether they are collapsible parent terms or not).
   • Nested filter items are now separated vertically by 12px instead of 4px. This might be considered an improvement to usability/accessibility.
   • The larger top margins for nested parent terms have been removed to allow for a more consistent display of different arrangements of nested terms.
   • Indentation of nested items has been standardized and increased slightly.
3. Standardize the grouping of checkbox items into sections (either a collapsible set of hierarchical items or a flat list of checkbox items). Each section has a top border with a 1rem top margin and a 1.125rem bottom margin around the content. (The bottom spacing looked off to me without the extra 2px.)
4. Adjust margins and padding as necessary to ensure smooth collapse and expand animations.
5. Ensure filter items always use the full width of the exposed form container.

Related issues

#3567
Closes AZDIGITAL-158

How to test

Probo review site: https://7b5e2985-cedf-4a13-ab91-3a35916c835d--pr-3577.probo.build/

1. Compare the AZ Finder exposed form in the sidebar on the Finder pages with current Quickstart. For example, you can compare with the Probo site for another PR:
   • Current Quickstart - Page Finder vs. This PR - Page Finder
   • Current Quickstart - Event Finder vs. This PR - Event Finder
   • Current Quickstart - People Finder vs. This PR - People Finder
2. Confirm that the appearance of the taxonomy term filters is updated as indicated in the description above.
3. Adding further terms to the relevant vocabularies may help in testing the visual changes.

Types of changes

Arizona Quickstart (install profile, custom modules, custom theme)

• Patch release changes
  • Bug fix
  • Accessibility, performance, or security improvement
  • Critical institutional link or brand change
  • Adding experimental module
  • Update experimental module
• Minor release changes
  • New feature
  • Breaking or visual change to existing behavior
  • Upgrade experimental module to stable
  • Enable existing module by default or database update
  • Non-critical brand change
  • New internal API or API improvement with backwards compatibility
  • Risky or disruptive cleanup to comply with coding standards
  • High-risk or disruptive change (requires upgrade path, risks regression, etc.)
• Other or unknown
  • Other or unknown

Drupal core

• Patch release changes
  • Security update
  • Patch level release (non-security bug-fix release)
  • Patch removal that's no longer necessary
• Minor release changes
  • Major or minor level update
• Other or unknown
  • Other or unknown

Drupal contrib projects

• Patch release changes
  • Security update
  • Patch or minor level update
  • Add new module
  • Patch removal that's no longer necessary
• Minor release changes
  • Major level update
• Other or unknown
  • Other or unknown

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• My change requires release notes.

[danahertzberg]

@bberndt-uaz I'm loving the visual consistency here! Thank you!

Here are some thoughts of mine.

1. (In red) Can the vertical spacing match the primary (blue) filters? I think more space in nested items would help.
2. (In green) Can the nested items have a bit more padding-left? Having them appear more nested would help alleviate some of the misalignment I'm perceiving. Upping it by 5px seems to look good to me, thoughts?

[joeparsons]

Is this something we'd want to include in patch release(s) (since it's updating an experimental module)?

[bberndt-uaz]

@danahertzberg Thanks for your thoughts! I have updated the PR accordingly. I was still wary of increasing the indentation very much, but if you would like more I'd be happy to increase it further.

@joeparsons I think a patch release makes sense, but I don't know if we would like to limit this change to 2.11 to go along with the Finder overrides PR. This PR increases the height of the exposed form, so maybe it would be best to include it only with the override functionality so that users can set terms be collapsed by default if they wish?