feat(form-field,select,search): add clear button interaction option #569

[intermetric]

Summary by CodeRabbit

• New Features
  • Added an option for search fields, text fields, and selects to show the clear button only when the populated field or control is hovered, active, or focused. The option is off by default and requires clearing to be enabled.
• Documentation
  • Updated component guidance and interactive examples to explain and demonstrate clear-button behavior.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Repository: TEDI-Design-System/angular/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: c5b32b95-faf9-437b-bb9f-e721e5db28e6

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: TEDI-Design-System/angular/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: eed1b05b-56c8-4e2f-a792-394140257d3c

📥 Commits

Reviewing files that changed from the base of the PR and between 0a73e01 and 5133608.

📒 Files selected for processing (13)

• skills/tedi-angular/references/components.md
• src/tedi/components/form/form-field/form-field.component.scss
• src/tedi/components/form/form-field/form-field.component.spec.ts
• src/tedi/components/form/form-field/form-field.component.ts
• src/tedi/components/form/search/search.component.html
• src/tedi/components/form/search/search.component.spec.ts
• src/tedi/components/form/search/search.component.ts
• src/tedi/components/form/search/search.stories.ts
• src/tedi/components/form/select/select.component.scss
• src/tedi/components/form/select/select.component.spec.ts
• src/tedi/components/form/select/select.component.ts
• src/tedi/components/form/select/select.stories.ts
• src/tedi/components/form/text-field/text-field.stories.ts

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

Form fields, search fields, and selects add a showClearOnInteraction option. When enabled with clearing and a nonempty value, the clear button appears during interaction states. Tests, Storybook stories, and component guidance cover the option.

Changes

Clear button visibility

Layer / File(s)	Summary
Form-field visibility behavior src/tedi/components/form/form-field/*, src/tedi/components/form/text-field/text-field.stories.ts, skills/tedi-angular/references/components.md	Form fields add showClearOnInteraction and apply a class when the clear button is shown. Styles hide the button until hover, active, or focus. Tests, guidance, and a text-field story cover the behavior.
Search field integration src/tedi/components/form/search/*	Search fields expose the option and bind it to the form field. Tests and a Storybook story cover the enabled state.
Select visibility behavior src/tedi/components/form/select/*	Selects apply the option when clearing is enabled and a value is selected. Styles, tests, and Storybook controls and stories cover the behavior.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~15 minutes

Change: Feature

Suggested reviewers: mart-sessman

Merge Risk: ⚪ Minimal · up to 51336

The opt-in reveals clear buttons on populated, clearable controls during hover, active, or focus interaction. No actionable merge risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the affected form components and the addition of the clear button interaction option. It matches the main change in the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 9…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

♿ Accessibility — ✅ no blocking violations

No accessibility violations in the components changed by this PR.

🔕 Known issues — 20 stories marked todo (warn only)

Stories

• TEDI-Ready/Components/Form/DateField — Open For Visual Test
• TEDI-Ready/Content/Calendar — Availability, Day Statuses, Default, Header Variants, Multiple Selected Dates, No Controls, Range, With Footer, With Weeks Count
• TEDI-Ready/Content/TextGroup — Types
• TEDI-Ready/Layout/Header — Logged In With Sidenav
• TEDI-Ready/Layout/SideNav — Collapsible Toggle, Default, Medium Sidenav Items, Second Level Menu Items, Second Level Menu Items Parents Are Links, Small Sidenav Items, Third Level Menu Items, Third Level Menu Items Parents Are Links

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[github-actions]

🎨 Chromatic

9 visual change(s) to review before merging.

Built from 5133608. Commits pushed after this are not covered; approve again to rebuild.

View the build

[github-actions]

🎨 Chromatic

4 visual change(s) were detected on rc after this pull request merged.

Review and accept them