feat(search): add new TEDI-ready component #524 - #539
Conversation
|
Warning Review limit reached
Next review available in: 50 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughChangesTEDI Search Component and Adoption
Storybook and Styling Updates
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
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
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
📒 Files selected for processing (29)
.storybook/preview-head.htmlcommunity/components/form/search/search.component.tscommunity/components/form/search/search.stories.tsskills/tedi-angular/references/components.mdtedi/components/buttons/card-button/card-button.stories.tstedi/components/buttons/collapse-button/collapse-button.stories.tstedi/components/filter/filter.stories.tstedi/components/form/date-field/date-field.stories.tstedi/components/form/feedback-text/feedback-text.stories.tstedi/components/form/form-field/form-field.component.scsstedi/components/form/index.tstedi/components/form/search/index.tstedi/components/form/search/search.component.htmltedi/components/form/search/search.component.scsstedi/components/form/search/search.component.spec.tstedi/components/form/search/search.component.tstedi/components/form/search/search.stories.tstedi/components/form/text-field/text-field.component.scsstedi/components/form/text-field/text-field.stories.tstedi/components/helpers/scroll-fade/scroll-fade.stories.tstedi/components/helpers/timeline/timeline.stories.tstedi/components/layout/header/header-language/header-language.component.htmltedi/components/layout/header/header-language/header-language.component.tstedi/components/layout/header/header-role/header-role.component.htmltedi/components/layout/header/header-role/header-role.component.scsstedi/components/layout/header/header-role/header-role.component.spec.tstedi/components/layout/header/header-role/header-role.component.tstedi/components/layout/header/header.stories.tstedi/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
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
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 winBind disabled state to
tedi-iconasinherit.
form-field.component.htmlpasses[color]="icon.color ?? 'secondary'", so the disabled CSS override can only compete with non-defaultcolorvalues 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
📒 Files selected for processing (3)
skills/tedi-angular/references/components.mdtedi/components/form/form-field/form-field.component.scsstedi/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
# [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))
https://storybook.tedi.ee/angular/feat/524-add-search-tedi-ready-component/?path=/docs/tedi-ready-components-form-search--docs
Summary by CodeRabbit