Refactor custom field components for improved styling and functionality

[adrianjm-dotCMS]

UX/UI improvements for custom fields

Summary

This PR focuses on UX/UI improvements for custom fields that use the shared custom dropdown/select pattern. The goal is to align their look and behavior with the PrimeNG native select and platform design system

---

Changes

1. Tag Storage and Template selector Aligned with primeng

2. Keytag now has a toggle to Edit/Save and gray background when its readonly

Screen.Recording.2026-02-24.at.3.46.40.PM.mov

3. Foward to button aligned with the platform

---

[Copilot]

Pull request overview

This PR refactors custom field components in Velocity templates to improve styling consistency and functionality. The changes modernize custom dropdown/select buttons by restructuring them to use a span for the label text and a PrimeNG chevron icon, separating concerns and improving maintainability. Additionally, the keytag field receives enhanced edit/save toggle functionality and styling updates.

Changes:

• Refactored custom select button structure to use separate span elements for labels and PrimeNG icons, enabling better styling control
• Updated keytag field to support dynamic Edit/Save button toggling with improved visual feedback
• Aligned SCSS styles with PrimeNG design patterns, removing borders from dropdowns in favor of box-shadows
• Standardized color usage by replacing non-existent bg-surface-200 classes with the established bg-gray-200 from the design system
• Removed unnecessary PrimeNG button classes from file browser button to use default styling

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tag_storage_field_creation_new.vtl	Refactored button structure to include span wrapper for label text and PrimeNG chevron icon
keytag_custom_field_new.vtl	Added Edit/Save button toggle functionality with mousedown prevention, updated color classes from bg-surface-200 to bg-gray-200
template_custom_field_new.vtl	Added setSelectButtonLabel helper function and updated button HTML to include span + icon structure
file_browser_field_render_new.vtl	Removed PrimeNG-specific button classes to use default button styling
native-field.component.scss	Enhanced custom select button styling with PrimeNG-style icon container, removed dropdown border to align with PrimeNG patterns, updated option styling for better UX