Feature #5242 Make reset button styling configurable in AZ Finder exposed forms

[Copilot]

Make Reset Button Styling Configurable in AZ Finder

Implementation Complete ✅

Changes Made

1. Core Plugin Changes: Added configurable reset_button_classes with sanitization
2. Schema Definition: Added configuration schema for the new setting
3. Default Configurations: Updated all 4 views with default classes
4. Upgrade Path: Created post_update hook to update existing installations
5. Code Standards: Fixed all PHPCS issues including doc comment formatting

Implementation Details

• Class constant for DRY compliance: DEFAULT_RESET_BUTTON_CLASSES
• Uses Html::getClass() for sanitization
• Type validation and defensive programming
• Schema validation ensures proper configuration
• Post update uses ConfigEntityUpdater for batch processing
• Explicit array assignment in post_update (no foreach references)
• Clean code with no trailing whitespace
• All lines comply with 80 character limit
• Doc comments follow Drupal standards (short description on single line)

Files Changed

• QuickstartExposedFilters.php - Core functionality with sanitization
• az_finder.schema.yml - Configuration schema definition
• 4 view config files - Default values for all views
• az_finder.post_update.php - Upgrade path for existing sites

Security & Quality

• ✅ Input sanitization with Html::getClass()
• ✅ Schema validation for configuration
• ✅ 100% backward compatible
• ✅ Proper upgrade path for existing sites
• ✅ No foreach reference issues
• ✅ Clean code formatting
• ✅ PHPCS compliant (all standards met)
• ✅ Default classes documented in post_update

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Make reset button styling configurable in AZ Finder exposed forms</issue_title>
<issue_description>## Motivation

Site builders need more control over the styling and spacing of the reset button in AZ Finder views. Currently, the reset button has hardcoded CSS classes that cannot be easily adjusted to match different design requirements.

Is your feature request related to a problem? Please describe.

Each view has filters styled in unique ways, and adding our hardcoded reset button may or may not fit with the styling of the view it is being added to. Site builders are frustrated because:

Reset button styling is hardcoded - The reset button always uses btn-secondary, btn-sm, w-100, and fixed margins (ms-1 me-1 mb-3), making it impossible to match the styling of the view's other form elements without custom CSS or template overrides.

Proposed Resolution

Describe the solution you'd like

Add a "Button CSS Classes" configuration option to the QuickstartExposedFilters plugin's Reset Button Settings:

• Add "Button CSS Classes" text field
• Default value: btn btn-secondary btn-sm w-100 mb-3 ms-1 me-1
• Only js-active-filters-reset class is hardcoded (required for JavaScript functionality)
• Site builders can specify any Bootstrap utility classes:
  • Colors: btn-red, btn-outline-blue, btn-secondary
  • Sizing: btn-sm, btn-lg
  • Width: w-auto, w-100, w-50
  • Spacing: mb-2, ms-0, me-auto

Describe alternatives you've considered

Alternative 1: Individual dropdowns for each property

• Separate fields for button color, size, width, margins
• More user-friendly for non-technical users
• Rejected: Too verbose (6+ fields), less flexible, more code to maintain

Alternative 2: Leave as-is, require template overrides

• Site builders use custom templates or theme suggestions
• Rejected: Requires developer knowledge, harder to maintain

Alternative 3: Add only color/size dropdowns

• Provide UI for most common options only
• Rejected: Still not flexible enough for custom layouts

Roles and Permissions considerations

A clear and concise description of how each of the following roles would be impacted by this change:

• Anonymous user - No impact (frontend display only)
• Authenticated user - No impact (frontend display only)
• Content editor - No impact (does not configure views)
• Content administrator - No impact (does not have access to configure views)
• Administrator - Benefits from additional configuration flexibility when building finder views in Views UI. Requires knowledge of Bootstrap CSS classes to use effectively.

Additional context

This follows a similar pattern as the Block Class module - providing a text field for CSS classes rather than individual dropdowns for every possible style property. The approach balances:

• Simplicity: One text field instead of many dropdowns
• Flexibility: Can use any CSS classes, including custom ones
• Safety: Critical JavaScript classes are still hardcoded
• Familiarity: Drupal users already understand the "CSS classes" field pattern

The configuration is stored in view configuration and exported with the view.</issue_description>

<agent_instructions>please ensure all code checks pass after you create the PR</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Make reset button styling configurable in AZ Finder exposed forms #5242

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[trackleft]

@copilot please consider updating the schema file for az_finder for this new setting.
Additionally, please consider other default value objects already in this codebase.
One more thing, please update any views configuration that uses the widget we are editing to account for this change and possibly create a post update function to update existing site views configuration.

[Copilot]

@copilot please consider updating the schema file for az_finder for this new setting.
Additionally, please consider other default value objects already in this codebase.
One more thing, please updat...

Done in commit 8dba2f1. I've added:

1. Schema definition (az_finder.schema.yml): Added reset_button_classes as type string
2. View configurations: Updated all 4 views (az_events, az_news, az_page_by_category, az_person) with default value 'btn btn-sm btn-secondary w-100 mx-1 mb-3'
3. Post update hook (az_finder.post_update.php): Created az_finder_post_update_add_reset_button_classes() to automatically add the default value to existing site views using az_better_exposed_filters

The post update uses ConfigEntityUpdater to batch-update all views with the new setting, ensuring existing sites get the default value on update.

[trackleft]

@copilot take a look at the pull request checks that ran for this pull request and address any issues

[Copilot]

@copilot take a look at the pull request checks that ran for this pull request and address any issues

Fixed in commit 6b9b2bc. The PHPCS check was failing due to two lines exceeding the 80 character limit:

1. Line 12 in az_finder.post_update.php - Split the comment across multiple lines
2. Line 113 in QuickstartExposedFilters.php - Shortened "JavaScript" to "JS" in comment

The PHPUnit test failures appear to be unrelated to my changes - they're failing because the scaffolding build cache is missing, causing all tests to fail with "az-quickstart-scaffolding: No such file or directory". This is an infrastructure/cache issue, not a code issue.

[trackleft]

Among other advantages, this PR allows adding a styled button to horizontal displays

[trackleft]

@copilot did you see this?

[Copilot]

@copilot did you see this?

...

Yes, fixed in commit 7514b57. The doc comment format violated Drupal coding standards - the short description must be on a single line. I've reformatted it to:

/**
 * Add default reset_button_classes to existing views.
 *
 * Updates all views using az_better_exposed_filters.
 */

This follows the standard where the first sentence is the short description (line 12), and additional details go in a separate paragraph (line 14).

[trackleft]

Here's another screenshot of an example using align-self-center btn btn-red for the button classes. Note that the reset counter works for this too.

Unfortunately, neither the counter or the reset button seem to interact with the "Type" dropdown.

[mrbeiley]

Looks awesome!

[zsaenz]

On the Publication page, I noticed a style issue:
On Medium view (992 and over breakpoint), the vertical alignment appears off.

It's barely noticable, but the search button looks a bit smaller than the other, maybe that's why it's misaligned (being outside of the "edit-actions" div?) It might only be a pixel or so.

[trackleft]

@zsaenz this PR is not looking for design review, it is more about are you able to change the classes of the buttons and does the database update look correct.

[az-digital-bot]

Tugboat has finished building the preview for this pull request!

Link:

• https://pr5244-lthrpu1xwlkinq9q65dftzkiimf6koix.tugboatqa.com

Dashboard:

• https://dashboard.tugboatqa.com/6978061410a794417b2b6b2f

[trackleft]

I tested the database update on a site with a custom finder and it updated correctly for me.

 lando drush updb -y && lando drush cd-update -y
 ----------- ----------- ------------- ------------------------------------- 
  Module      Update ID   Type          Description                          
 ----------- ----------- ------------- ------------------------------------- 
  az_finder   add_reset   post-update   Add default reset_button_classes to  
              _button_c                 existing views.   Updates all views  
              lasses                    using az_better_exposed_filters.     
 ----------- ----------- ------------- ------------------------------------- 


 // Do you wish to run the specified pending updates?: yes.                                                             

>  [notice] Update started: az_finder_post_update_add_reset_button_classes
>  [notice] Update completed: az_finder_post_update_add_reset_button_classes
 [success] Finished performing updates.
+------------+--------------------------------+-----------+
| Collection | Config                         | Operation |
+------------+--------------------------------+-----------+
|            | search.page.node_search        | Update    |
|            | views.view.az_person           | Update    |
|            | views.view.az_page_by_category | Update    |
|            | views.view.az_news             | Update    |
|            | views.view.az_events           | Update    |
+------------+--------------------------------+-----------+

 // Import the listed configuration changes?: yes.                                                                      

 [notice] Synchronized configuration: update search.page.node_search.
 [notice] Synchronized configuration: update views.view.az_person.
 [notice] Synchronized configuration: update views.view.az_page_by_category.
 [notice] Synchronized configuration: update views.view.az_news.
 [notice] Synchronized configuration: update views.view.az_events.
 [notice] Finalizing configuration synchronization.
 [success] The configuration was imported successfully.

[bberndt-uaz]

Nitpick: I believe we have a preference for .btn-blue rather than .btn-secondary in Arizona Bootstrap? .btn-secondary isn't included on the Buttons docs page.

Suggested change

	reset_button_classes: 'btn btn-sm btn-secondary w-100 mx-1 mb-3'
	reset_button_classes: 'btn btn-sm btn-blue w-100 mx-1 mb-3'

[trackleft]

I had co-pilot create a new pr for this functionality to be included in the next minor release.#5285

If that gets merged we can update this with the new class.