feat: Added highlight container #1880
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new IgcHighlightComponent that enables efficient text searching and highlighting within projected content. The component leverages the CSS Custom Highlight API for performant text highlighting.
Key Changes:
- Added
IgcHighlightComponentwith search and navigation capabilities - Refactored
escapeRegexutility into a shared function - Integrated component into the library's component registry and exports
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| stories/highlight.stories.ts | Storybook stories demonstrating the highlight component with various use cases including search UI and performance scenarios |
| src/index.ts | Exported the new IgcHighlightComponent for public API access |
| src/components/highlight/service.ts | Core service implementing highlight logic using CSS Custom Highlight API with navigation and search capabilities |
| src/components/highlight/highlight.ts | Main component class exposing search properties and navigation methods |
| src/components/highlight/highlight.spec.ts | Unit tests covering component initialization, search functionality, and navigation behavior |
| src/components/date-time-input/date-util.ts | Refactored to use shared escapeRegex utility function |
| src/components/common/util.ts | Added shared escapeRegex utility function and updated scrollIntoView signature |
| src/components/common/definitions/defineAllComponents.ts | Registered the new highlight component in the component registry |
Comment on lines
+45
to
+50
| ::highlight(${this._key}) { | ||
| background-color: var(--resting-background, hsla(var(--ig-gray-300), var(--ig-gray-a))); | ||
| color: var(--resting-color, white); | ||
| } | ||
| ::highlight(${this._activeKey}) { | ||
| background-color: var(--active-background, hsla(333deg , calc( 78% * 1.23), calc( 49% * 1.34), 1)); |
There was a problem hiding this comment.
The default active background color uses inline calculations that are difficult to understand and maintain. Consider extracting this to a named constant or CSS custom property with a descriptive name that explains what color this represents.
Suggested change
| ::highlight(${this._key}) { | |
| background-color: var(--resting-background, hsla(var(--ig-gray-300), var(--ig-gray-a))); | |
| color: var(--resting-color, white); | |
| } | |
| ::highlight(${this._activeKey}) { | |
| background-color: var(--active-background, hsla(333deg , calc( 78% * 1.23), calc( 49% * 1.34), 1)); | |
| :host { | |
| --igc-highlight-active-bg-default: hsla(333deg, calc(78% * 1.23), calc(49% * 1.34), 1); | |
| } | |
| ::highlight(${this._key}) { | |
| background-color: var(--resting-background, hsla(var(--ig-gray-300), var(--ig-gray-a))); | |
| color: var(--resting-color, white); | |
| } | |
| ::highlight(${this._activeKey}) { | |
| background-color: var(--active-background, var(--igc-highlight-active-bg-default)); |
|
|
||
| private _createRegex(value: string): RegExp { | ||
| return new RegExp( | ||
| `${escapeRegex(value)}`, |
There was a problem hiding this comment.
The template literal wrapping escapeRegex(value) is unnecessary. You can directly pass escapeRegex(value) as the first argument to RegExp constructor.
Suggested change
| `${escapeRegex(value)}`, | |
| escapeRegex(value), |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.