Skip to content

feat(search): add new TEDI-ready component #524 - #539

Merged
ly-tempel-bitweb merged 11 commits into
rcfrom
feat/524-add-search-tedi-ready-component
Jul 30, 2026
Merged

feat(search): add new TEDI-ready component #524#539
ly-tempel-bitweb merged 11 commits into
rcfrom
feat/524-add-search-tedi-ready-component

Conversation

@ly-tempel-bitweb

@ly-tempel-bitweb ly-tempel-bitweb commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

https://storybook.tedi.ee/angular/feat/524-add-search-tedi-ready-component/?path=/docs/tedi-ready-components-form-search--docs

Summary by CodeRabbit

  • New Features
    • Added a TEDI-Ready search component with clearable input, optional search button, feedback text, accessibility support, and reactive-forms integration.
    • Integrated the new search component into header role and popover experiences.
  • Bug Fixes
    • Improved disabled form-field icon styling and large field icon sizing.
    • Standardized Storybook canvas spacing and sizing.
  • Documentation
    • Documented the TEDI-Ready search component and marked the previous community search component as deprecated.
    • Added and updated design reference links across component documentation.

@coderabbitai

coderabbitai Bot commented Jul 9, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@ly-tempel-bitweb, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 50 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 76a47f62-8d87-42ee-a892-61c6f9217b47

📥 Commits

Reviewing files that changed from the base of the PR and between 3a9f2fb and 76154b0.

📒 Files selected for processing (4)
  • tedi/components/form/form-field/form-field.component.html
  • tedi/components/form/search/search.component.html
  • tedi/components/form/search/search.component.spec.ts
  • tedi/components/form/search/search.component.ts
📝 Walkthrough

Walkthrough

Changes

TEDI Search Component and Adoption

Layer / File(s) Summary
Search component contract, rendering, and tests
tedi/components/form/search/*, tedi/components/form/form-field/*
Adds the standalone tedi-search component, styling, accessibility behavior, ControlValueAccessor support, and comprehensive unit and reactive-form tests.
Search Storybook demonstrations
tedi/components/form/search/search.stories.ts
Adds standard, accessibility, reactive-form, suggestion, typeahead, result-action, and asynchronous search examples.
Search exports and community deprecation
tedi/components/form/index.ts, tedi/components/form/search/index.ts, community/components/form/search/*, skills/tedi-angular/references/components.md
Exports the TEDI search component and documents the community search component as deprecated in favor of tedi-search.
Header and popover integration
tedi/components/layout/header/header-role/*, tedi/components/layout/header/header.stories.ts, tedi/components/overlay/popover/popover.stories.ts
Replaces native search markup with tedi-search, updates value and focus handling, and migrates related Angular control flow and tests.

Storybook and Styling Updates

Layer / File(s) Summary
Form Storybook state displays
tedi/components/form/text-field/text-field.stories.ts
Uses tedi-alert and JSON-formatted output for template-driven and reactive form state examples.
Story documentation references
tedi/components/buttons/*/*.stories.ts, tedi/components/filter/*, tedi/components/form/feedback-text/*, tedi/components/helpers/{scroll-fade,timeline}/*
Adds or updates Figma and Zeroheight documentation links.
Date-field story formatting
tedi/components/form/date-field/date-field.stories.ts
Reformats helpers, type details, documentation strings, and story descriptions without changing their content or behavior.
Storybook canvas styling
.storybook/preview-head.html
Normalizes Storybook main-canvas margin, box sizing, height, and minimum-height declarations.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant HeaderRoleComponent
  participant SearchComponent
  participant FormControl
  participant NativeInput

  HeaderRoleComponent->>SearchComponent: renders tedi-search and passes value
  SearchComponent->>NativeInput: renders accessible input
  NativeInput->>SearchComponent: emits valueChange(value)
  SearchComponent->>FormControl: invokes ControlValueAccessor onChange
  HeaderRoleComponent->>SearchComponent: calls focus()
  SearchComponent->>NativeInput: focuses input
Loading

Possibly related PRs

  • TEDI-Design-System/angular#523: Updates related Popover story templates and metadata where this change replaces custom search markup with tedi-search.

Suggested reviewers: mart-sessman

🚥 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 summarizes the main change: adding a new TEDI-ready search component.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
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 unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/524-add-search-tedi-ready-component

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@skills/tedi-angular/references/components.md`:
- Around line 2008-2009: The Search deprecation note still references an
outdated suggestions API that is not part of the shipped SearchComponent
contract. Update the Search section in references/components.md to describe only
the actual TEDI-ready replacement surface exposed by SearchComponent—button,
feedbackText, searchEvent, and clear—and remove any mention of tedi-dropdown,
autocompleteOptions, withButton, or buttonText as part of the new API.

In `@tedi/components/form/index.ts`:
- Line 14: The form barrel is re-exporting the search component directly, which
breaks the required export chain. Update the `tedi/components/form/index.ts`
re-export to go through the `search` barrel instead of `search.component`, so
the chain remains `public-api.ts` → `tedi/index.ts` → category `index.ts` →
component `index.ts`. Use the `form` index and `search/index.ts` symbols to
locate and adjust the export.

In `@tedi/components/form/search/search.component.spec.ts`:
- Around line 27-46: The SearchComponent spec is using the real
TediTranslationService instead of a test double, even though
TEDI_TRANSLATION_DEFAULT_TOKEN is already provided. Update the TestBed setup in
the SearchComponent test to add a mock provider for TediTranslationService
alongside the existing translation token, and keep the component setup in
beforeEach unchanged otherwise.

In `@tedi/components/form/search/search.stories.ts`:
- Line 791: The story templates in SearchStories rely on structural and pipe
features that are not currently provided by the story metadata. Update the
moduleMetadata for tedi/components/form/search/search.stories.ts, alongside the
existing TitleCasePipe setup, to include NgFor and JsonPipe (or refactor the
affected stories like Sizes, States, and WithReactiveForms to use `@for` instead
of *ngFor and remove the json pipe dependency). Make sure the story definitions
that reference SIZES, STATES, and reactive form state can compile with the
available imports.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 34b6cb9d-5bf6-473e-bb77-60b8cf1560ac

📥 Commits

Reviewing files that changed from the base of the PR and between 690f796 and 3f012f2.

📒 Files selected for processing (29)
  • .storybook/preview-head.html
  • community/components/form/search/search.component.ts
  • community/components/form/search/search.stories.ts
  • skills/tedi-angular/references/components.md
  • tedi/components/buttons/card-button/card-button.stories.ts
  • tedi/components/buttons/collapse-button/collapse-button.stories.ts
  • tedi/components/filter/filter.stories.ts
  • tedi/components/form/date-field/date-field.stories.ts
  • tedi/components/form/feedback-text/feedback-text.stories.ts
  • tedi/components/form/form-field/form-field.component.scss
  • tedi/components/form/index.ts
  • tedi/components/form/search/index.ts
  • tedi/components/form/search/search.component.html
  • tedi/components/form/search/search.component.scss
  • tedi/components/form/search/search.component.spec.ts
  • tedi/components/form/search/search.component.ts
  • tedi/components/form/search/search.stories.ts
  • tedi/components/form/text-field/text-field.component.scss
  • tedi/components/form/text-field/text-field.stories.ts
  • tedi/components/helpers/scroll-fade/scroll-fade.stories.ts
  • tedi/components/helpers/timeline/timeline.stories.ts
  • tedi/components/layout/header/header-language/header-language.component.html
  • tedi/components/layout/header/header-language/header-language.component.ts
  • tedi/components/layout/header/header-role/header-role.component.html
  • tedi/components/layout/header/header-role/header-role.component.scss
  • tedi/components/layout/header/header-role/header-role.component.spec.ts
  • tedi/components/layout/header/header-role/header-role.component.ts
  • tedi/components/layout/header/header.stories.ts
  • tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.ts
💤 Files with no reviewable changes (2)
  • tedi/components/layout/header/header-language/header-language.component.ts
  • tedi/components/layout/header/header-role/header-role.component.scss

Comment thread skills/tedi-angular/references/components.md Outdated
Comment thread tedi/components/form/index.ts Outdated
Comment thread tedi/components/form/search/search.component.spec.ts
Comment thread tedi/components/form/search/search.stories.ts
@ly-tempel-bitweb ly-tempel-bitweb linked an issue Jul 9, 2026 that may be closed by this pull request
21 tasks
@codecov

codecov Bot commented Jul 9, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
tedi/components/form/form-field/form-field.component.scss (1)

55-58: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Bind disabled state to tedi-icon as inherit.

form-field.component.html passes [color]="icon.color ?? 'secondary'", so the disabled CSS override can only compete with non-default color values via cascade rules. Use the icon’s own color API: color="inherit" for disabled icons that should follow the parent color, or pass a resolved disabled color if the icon must remain explicitly colored.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tedi/components/form/form-field/form-field.component.scss` around lines 55 -
58, Update the disabled icon handling in the form-field template and styles
around the tedi-form-field__icon rendering so disabled icons receive
color="inherit" through the tedi-icon color API instead of relying on the CSS
color override. Preserve explicitly resolved icon colors only when they are
intended to remain explicit, and ensure both &--disabled and
&__input:has(input:disabled) states use the inherited disabled color behavior.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@tedi/components/form/form-field/form-field.component.scss`:
- Around line 55-58: Update the disabled icon handling in the form-field
template and styles around the tedi-form-field__icon rendering so disabled icons
receive color="inherit" through the tedi-icon color API instead of relying on
the CSS color override. Preserve explicitly resolved icon colors only when they
are intended to remain explicit, and ensure both &--disabled and
&__input:has(input:disabled) states use the inherited disabled color behavior.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 834dbf13-7188-4620-bce3-7b28decb528f

📥 Commits

Reviewing files that changed from the base of the PR and between 19940bd and 3a9f2fb.

📒 Files selected for processing (3)
  • skills/tedi-angular/references/components.md
  • tedi/components/form/form-field/form-field.component.scss
  • tedi/components/form/index.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • tedi/components/form/index.ts
  • skills/tedi-angular/references/components.md

Comment thread tedi/components/form/search/search.component.html Outdated
@ly-tempel-bitweb
ly-tempel-bitweb merged commit f637542 into rc Jul 30, 2026
26 checks passed
@ly-tempel-bitweb
ly-tempel-bitweb deleted the feat/524-add-search-tedi-ready-component branch July 30, 2026 13:25
github-actions Bot pushed a commit that referenced this pull request Jul 30, 2026
# [7.1.0-rc.14](angular-7.1.0-rc.13...angular-7.1.0-rc.14) (2026-07-30)

### Features

* **search:** add new TEDI-ready component [#524](#524) ([#539](#539)) ([f637542](f637542))
github-actions Bot pushed a commit that referenced this pull request Aug 6, 2026
# [7.1.0](angular-7.0.1...angular-7.1.0) (2026-08-06)

### Bug Fixes

* **date-field:** changed min and max date defaults, exposed inputs [#590](#590) ([#591](#591)) ([30edbb3](30edbb3))
* **date-field:** date-field now passes value correctly to text-field [#592](#592) ([#593](#593)) ([5bc496e](5bc496e))
* **date-picker:** fix DatePicker focus ring [#560](#560) ([#574](#574)) ([17f675d](17f675d))
* **dropdown:** skip close on certain events [#544](#544) ([#545](#545)) ([f9be659](f9be659))
* **form-field,date-field,text-field,time-field:** value no longer cuts early [#561](#561) ([#571](#571)) ([17322fc](17322fc))
* **pagination:** community pagination results rendered twice [#548](#548) ([2ba2bb3](2ba2bb3))
* **popover,search,header:** fix Header a11y violations and document HeaderTop [#601](#601) ([#602](#602)) ([86312a9](86312a9))
* **popover:** fixed popover outside-click inside modal being registered as inside [#582](#582) ([#583](#583)) ([139406b](139406b))
* **select,dropdown,popover:** hideOnScroll no longer closes overlay when scrolling its content [#562](#562) ([#567](#567)) ([3120825](3120825))
* **select:** keep typed text and tags in view while searching [#566](#566) ([#584](#584)) ([6afc148](6afc148))
* **select:** truncate over-wide tags in a single row [#586](#586) ([#598](#598)) ([68dcb27](68dcb27))
* **table:** scrollable table now scrolls top on page change [#549](#549) ([#550](#550)) ([9771fc3](9771fc3))
* **tabs:** added anchor support [#594](#594) ([#597](#597)) ([c9a3a98](c9a3a98))
* **text-field,time-field:** caret no longer clipped at the start of the input [#575](#575) ([#576](#576)) ([644d3f5](644d3f5))
* **text-field:** support bare disabled attribute via booleanAttribute transform [#558](#558) ([#559](#559)) ([fad56f8](fad56f8))
* **textgroup:** label doesn't shrink when width is fixed [#506](#506) ([#531](#531)) ([4e9d713](4e9d713))

### Features

* **breadcrumbs:** new TEDI-ready component [#512](#512) ([#518](#518)) ([6691cd2](6691cd2))
* **date-field:** added hideOnScroll [#563](#563) ([#595](#595)) ([0dfad0f](0dfad0f))
* **header:** add Header top [#311](#311) ([#504](#504)) ([1e2eff2](1e2eff2))
* **info-button:** focus ring offset reduced [#517](#517) ([#521](#521)) ([b7d06d3](b7d06d3))
* **input-group:** new TEDI-ready component [#18](#18) ([#532](#532)) ([c1728c0](c1728c0))
* **label-row,info-tooltip:** new components [#515](#515) ([#525](#525)) ([1e33865](1e33865))
* **popover:** add Header popover variant under Popover [#442](#442) ([#523](#523)) ([a668b55](a668b55))
* **search:** add new TEDI-ready component [#524](#524) ([#539](#539)) ([f637542](f637542))
* **select:** added virtual scroll [#552](#552) ([#553](#553)) ([26e10ee](26e10ee))
* **slider:** new TEDI-ready component [#3](#3) ([#526](#526)) ([d2bf13a](d2bf13a))
* **table:** added getRowId and clearFilters [#565](#565) ([#589](#589)) ([1cf94a1](1cf94a1))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Search]: new TEDI-ready component

2 participants