Comment section: primary Send / tertiary Clear buttons with empty-message validation (Edit Contentlet)

[erickgonzalez]

Description

Update the buttons and validation in the Comment section of the new Edit Contentlet.

• The Send button is styled as a primary button.
• The Clear button is styled as a tertiary button.
• Both buttons are enabled at all times (never disabled).
• If the user clicks Send with an empty message, show inline validation:
  • A red border on the comment input.
  • An error message below the input: "A message is required."

Acceptance Criteria

Button styling

• The Send button uses the primary button style
• The Clear button uses the tertiary button style
• Both Send and Clear are enabled at all times, regardless of input state

Validation — empty message

• Clicking Send with an empty (or whitespace-only) comment does not submit
• On that attempt, the comment input shows a red border
• An error message "A message is required." is shown below the input
• Once the user enters a non-empty message, the red border and error message are cleared
• Clicking Send with a valid message submits the comment normally

Clear button

• Clicking Clear empties the comment input
• Clicking Clear also dismisses any active validation error/red border

Suggested Tests

Frontend styling + client-side validation only (no backend/endpoint change), so coverage is Unit-first with a single E2E smoke. Integration/Postman are not applicable.

Unit (Jest/Spectator) — primary coverage

• The Send button renders with the primary style; Clear renders with the tertiary style
• Both buttons are enabled regardless of input state (empty and non-empty)
• Clicking Send with an empty / whitespace-only message does not emit a submit
• On empty Send, the input shows the error/red-border state and the message "A message is required."
• Entering a non-empty message clears the error/red-border state
• Clicking Send with a valid message emits the submit with the message
• Clicking Clear empties the input and dismisses any active error state

E2E (Playwright) — one focused smoke only

• In the Comments tab, click Send with no text → red border + "A message is required." appears → type a comment → error clears → Send posts the comment. (Single flow; the styling/enabled-state and per-branch validation are already unit-covered, so no broader E2E.)

Integration / Postman

• No tests — this is button styling and client-side validation; the comment-submit endpoint and its contract are unchanged. (If the empty-message rule is also enforced server-side as part of this work, add a Postman check that a blank comment is rejected.)

Priority

Medium

Additional Context

Part of the new Edit Contentlet work (dotCMS: New Edit Contentlet), Comments section. Buttons stay enabled so the validation is driven by the Send action rather than a disabled state. Error copy is "A message is required." (final wording).

[github-actions]

PRs linked to this issue

• fix(edit-content): style comment Send/Clear buttons and add empty-message validation by @jcastro-dotcms