Skip to content

feat(edit-content): add placeholder to Tags field empty state#36291

Open
adrianjm-dotCMS wants to merge 2 commits into
mainfrom
issue-36194-add-empty-state-placeholder-to-tags-field-edit-con
Open

feat(edit-content): add placeholder to Tags field empty state#36291
adrianjm-dotCMS wants to merge 2 commits into
mainfrom
issue-36194-add-empty-state-placeholder-to-tags-field-edit-con

Conversation

@adrianjm-dotCMS

@adrianjm-dotCMS adrianjm-dotCMS commented Jun 23, 2026

Copy link
Copy Markdown
Member

Summary

  • The Tags field in the new Edit Contentlet had no placeholder, leaving users with no hint that the field supports both searching existing tags and typing to create new ones.
  • Added the placeholder text Search tags or type to create one. to the PrimeNG AutoComplete input, delivered via the dm i18n pipe consistent with existing field patterns in the codebase.

Closes #36194

Acceptance Criteria

  • AC1 — Empty state: When the Tags field contains zero tags and the input is untouched, the input element displays the placeholder text Search tags or type to create one.
  • AC2 — Exact text match: The placeholder string is exactly Search tags or type to create one. — same capitalisation, spacing, and trailing period, with no leading/trailing whitespace.
  • AC3 — Typing hides placeholder: Once the user focuses the Tags input and begins typing, the placeholder is no longer visible (standard HTML placeholder behavior).
  • AC4 — Tag present hides placeholder: When one or more tags have been added to the field, the placeholder is not visible regardless of whether the input is focused or blurred.
  • AC5 — Placeholder returns on clear: If all tags are removed and the input is emptied, the placeholder reappears.
  • AC6 — Scope: The placeholder appears only in the new Edit Contentlet Tags field; no other Tags field instances (legacy portlets, standalone tag pickers) are affected.

Test Plan

  • Open the new Edit Contentlet for any content type that has a Tags field
  • Verify the Tags input shows Search tags or type to create one. when empty
  • Start typing — verify the placeholder disappears
  • Add a tag — verify the placeholder is not visible
  • Remove all tags — verify the placeholder reappears

Visual Changes

Screenshots/GIFs needed: This PR includes frontend changes. Please attach visual evidence before marking as ready for review.

  • Before screenshot (empty Tags field with no placeholder)
  • After screenshot (empty Tags field showing the placeholder)

Notes

  • DotMessagePipe must be imported in DotTagFieldComponent independently — as a standalone component it does not inherit its parent's imports. The parent DotEditContentTagFieldComponent already had DotMessagePipe, but standalone components require their own declaration.
  • AC3, AC4, AC5 rely on native HTML placeholder attribute behavior — no custom logic was needed.

Closes #36194

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude

claude Bot commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

Claude finished @wezell's task in 45s —— View job


Rollback Safety Analysis

  • Read rollback-unsafe categories reference
  • Get full PR diff
  • Analyze diff against unsafe categories
  • Apply appropriate label

Result: ✅ Safe To Rollback

Label applied: AI: Safe To Rollback

The diff touches only 4 files, none of which fall into any unsafe category:

File Category Check Result
tag-field.component.html Pure template change (adds placeholder binding) ✅ Safe
tag-field.component.ts Adds DotMessagePipe to imports[] — no DB, ES, or API changes ✅ Safe
dot-edit-content-tag-field.component.spec.ts Test-only changes ✅ Safe
Language.properties Adds a new i18n key — additive, no existing key modified ✅ Safe

No database migrations, no Elasticsearch mapping changes, no REST/GraphQL contract changes, no data model changes, and no structural storage changes are present. Rolling back to N-1 simply removes the placeholder text — no data loss, no startup failures, no broken queries.

@github-actions

github-actions Bot commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

🤖 Bedrock Review — deepseek.v3.2

[🟡 Medium] core-web/libs/edit-content/src/lib/fields/dot-edit-content-tag-field/components/tag-field/tag-field.component.ts:40 — Added DotMessagePipe import but not used in the component's TypeScript class; ensure it's only for the template.

[🟡 Medium] core-web/libs/edit-content/src/lib/fields/dot-edit-content-tag-field/dot-edit-content-tag-field.component.spec.ts:62 — Missing test coverage for the placeholder translation when the message key is missing or returns empty.


Run: #28052155588 · tokens: in: 1767 · out: 121 · total: 1888

@adrianjm-dotCMS adrianjm-dotCMS marked this pull request as ready for review June 23, 2026 19:52
@github-actions

github-actions Bot commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

🤖 Bedrock Review — us.deepseek.r1-v1:0

No issues found.


Run: #28061636899 · tokens: in: 2421 · out: 451 · total: 2872

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI: Safe To Rollback Area : Frontend PR changes Angular/TypeScript frontend code

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

Add empty-state placeholder to Tags field (Edit Contentlet)

2 participants