Category field improvements: button styles, clear-all, chip X position, multi-row alignment (Edit Contentlet)

[erickgonzalez]

Description

Several improvements to the Category field in the new Edit Contentlet, across the category selector dialog and the field component.

Category selector dialog (the "Select categories" modal):

• Apply button styled as primary.
• Cancel button styled as tertiary (currently both look primary).
• Keep/standardize the existing Clear all action in the selected-categories panel.

Category field component (the field with chips + Select):

• The Select button styled as primary.
• Add a Clear all button/option to the field component so users can clear all selected categories without opening the selector.
• Investigate moving the X (remove) button to the left of each chip label instead of the right — apply if feasible; if a component constraint prevents it, document why.
• Left-align the chips when they wrap to more than one row (currently they appear center-aligned — see screenshot).

🖼️ Screenshots (attach to the issue): category selector dialog, categories field component, and the wrong (centered) alignment when chips span multiple rows.

Acceptance Criteria

Selector dialog

• The Apply button uses the primary style
• The Cancel button uses the tertiary style
• The dialog's existing Clear all action remains available and clears the selected-categories panel

Field component

• The Select button uses the primary style
• A Clear all button/option is available on the field component and removes all selected category chips
• Clearing all on the field updates the field value to empty

Chip layout

• When category chips wrap to more than one row, they are left-aligned (no centered rows)
• Single-row chips remain correctly left-aligned

X (remove) position — investigation

• Investigate moving the chip's X (remove) control to the left of the label
• If feasible, the X is positioned to the left of each chip label
• If not feasible, a brief note documents the constraint and the X stays on the right

Suggested Tests

Frontend styling/layout/state change (no backend/endpoint change), so coverage is Unit-first with a single E2E smoke. Integration/Postman are not applicable.

Unit (Jest/Spectator) — primary coverage

• Selector dialog: Apply renders with the primary style and Cancel with the tertiary style
• Selector dialog: the existing Clear all clears the selected-categories panel
• Field component: the Select button renders with the primary style
• Field component: a Clear all control is present and, when clicked, removes all chips and emits an empty field value
• Chip layout: with enough chips to wrap, the container uses left alignment (e.g. justify-content: flex-start) — assert the layout class/style, not pixel positions
• Chip X position: assert the X renders on the chosen side (left if the investigation lands on feasible; otherwise the test documents the right-side fallback)

E2E (Playwright) — one focused smoke only

• Open a content with a Category field → open the selector → Apply/Cancel styles correct → select categories → chips render and wrap left-aligned → field-level Clear all empties the chips. (Single happy-path; per-element styling and the clear/empty logic are already unit-covered, so no broader E2E.)

Integration / Postman

• No tests — these are presentation/layout and client-side state changes; category data and the save contract are unchanged.

Note: the X-to-left item is exploratory. If the investigation concludes it isn't feasible, the related unit assertion should verify the documented fallback (X on the right) rather than fail.

Priority

Medium

Additional Context

Part of the new Edit Contentlet work (dotCMS: New Edit Contentlet), Category field. The clear-all is requested in both places: a new one on the field component and the existing one in the selector dialog (standardized). The X-to-left change is exploratory ("check if possible") rather than a hard requirement. The multi-row alignment fix targets the centered-rows bug shown in the attached screenshot.

[erickgonzalez]

Note: If we're able to move the X to the left, let's check if is also propagated to the Tags Fields or if needs similar changes let's do them.

[github-actions]

PRs linked to this issue

• fix(edit-content): category field button styles, clear-all & chip alignment by @adrianjm-dotCMS